Question

我需要用BR标签替换2个单词之间的空格。我已经尝试了很多东西，我认为这个可行，但原始脚本只对第一个项目有效。 :(我需要它来替换所有菜单项。

这是CMS上的菜单文本，所以我不知道文本是什么。我所知道的是，它总是不超过2个字。

我可以使用JS或jQuery。

在这里演示：JS Bin Link

HTML：

<span class="navtext">Lorem ipsum</span>

<br>

<span class="navtext">Lorem ipsum</span>

<br>

<span class="navtext">Lorem ipsum</span>

JavaScript：

// Doesnt work
// var span = document.getElementsByTagName(".navtext");

// Only works for the first one
var span = document.querySelector(".navtext");

// Doesnt work
// var span = document.querySelectorAll("navtext");

function space() {
    var elem = document.createElement("br");
    // elem.className = "space";
    // elem.textContent = " ";
    return elem;
}

function replace(elem) {
    for(var i = 0; i < elem.childNodes.length; i++) {
        var node = elem.childNodes[i];
        if(node.nodeType === 1) {
            replace(node);
        } else {
            var current = node;
            var pos;
            while(~(pos = current.nodeValue.indexOf(" "))) {
                var next = current.splitText(pos + 1);
                current.nodeValue = current.nodeValue.slice(0, -1);
                current.parentNode.insertBefore(space(), next);
                current = next;
                i += 2;
            }
        }
    }
}

replace(span);

Answer 1

使用jQuery你可以这样做：

$("span.navtext").each(function(){
    $(this).html($(this).text().replace(/ /g,"<br />"));
})

Answer 2

我想，你不想使用jQuery。嗯，这是快速解决方案：

var elms = document.querySelectorAll(".navtext");

for(var i=0; i<elms.length; i++){
    elms[i].innerHTML = elms[i].innerHTML.replace(/\s/gi, "<br />");
}

这是jsfiddle：http://jsfiddle.net/ashishanexpert/NrTtg/

Answer 3

如果你安装jQuery，你可以使它更简单。按照安装说明进行操作，然后您需要的代码如下：

jQuery(function($) {
    // for each navtext run the described function
    $(".navtext").each(function() {
        // "this" represents the navtext

        // replace all " " with "<br/>" from this's html
        var code = $(this).text();
        code = code.replace(" ", "<br/>");

        // update this's html with the replacement
        $(this).html(code);
    });
});

Answer 4

Twitter上的某个人为我提供了修复，这与Ashish的回答完全一样。

var spans = document.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
  spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}

但这对我来说很有用，但确实给了我答案！所以感谢Pete Williams

这是我使用的代码：

var spans = document.querySelectorAll('.navtext');

for(var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}

用BR标记替换SPAN标记内的空格

4 个答案: