将br插入文本节点

Inserting br into a textnode

本文关键字：节点 插入文本 br      更新时间：2023-09-26

这可能看起来很奇怪。我有一个div的id为'quotes'，里面有一个blockquote。我认为如果引用的文本是诗歌，添加换行符会很有趣，我认为您可以使用'@'作为条件换行符，然后用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>

从文本节点内@的最后一个匹配开始并向后工作。下面的函数做到了这一点，并且还具有消除不必要的正则表达式的好处，使用更清晰的变量名并且更短:

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);
        }
    }
}

我建议这样做:

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 />");
}

什么是"条件换行"?我在你的代码中没有看到任何决定何时换行的东西

相关文章：