将 br 插入文本节点

Question

这可能看起来很奇怪。我有一个 id 为“quotes”的 div，里面有一个块引用。我认为如果引用的文本是诗歌，添加换行符会很有趣，并且我认为您可以使用“@”作为条件换行符，然后将其替换为 br 元素，如下所示：

function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");    
    var reg = new RegExp("@", "g");
    for (var i = 0; i < t.length; i++) {
        var r = t[i].lastChild.nodeValue.match(reg);
        if (r !== null) {
            var text = t[i].childNodes[0];
            var q = t[i].lastChild.nodeValue.indexOf("@");
            var x = document.createElement("br");
            t[i].insertBefore(x, text.splitText(q));
            t[i].lastChild.nodeValue = t[i].lastChild.nodeValue.replace(/\@/g, "");
        }
    }
}

这有效，但仅对于第一个例子，所以我需要一个循环，但我无法弄清楚。 div 会是这样的：

<div id = 'quotes'>
<blockquote> Some line, @ Some line, @ Some line@ </blockquote>
</div>

任何提示将不胜感激。

Answer 1

从文本节点中最后一个匹配的 @ 开始，然后向后进行。以下函数执行此操作，并且还具有消除不必要的正则表达式、使用更清晰的变量名称并且更短的优点：

function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");
    for (var i = 0; i < t.length; i++) {
        var splitPos, textNode = t[i].lastChild;

        while ( (splitPos = textNode.data.lastIndexOf("@")) != -1 ) {
            var newTextNode = textNode.splitText(splitPos);

            // Remove the @ from the start of the new text node
            newTextNode.deleteData(0, 1);

            var br = document.createElement("br");
            t[i].insertBefore(br, newTextNode);
        }
    }
}

Answer 2

我建议简单地这样做：

function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");    
    for (var i = 0; i < t.length; i++)
        r.innerHTML = r.innerHTML.replace(/@/g, "<br />");
}

什么是“条件换行符”？我在你的代码中没有看到任何决定何时断线的内容......