将br插入到textnode中

这看起来可能很奇怪。我有一个与'引号'ID的div，里面有一个blockquote。如果引用的文字是诗歌，我认为可以使用'@'作为有条件的换行符，然后用br元素替换它如下：将br插入到textnode中

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 id = 'quotes'> 
<blockquote> Some line, @ Some line, @ Some [email protected] </blockquote> 
</div>

任何提示将深表感激。

来源

2011-04-17 Paulx

为什么要使用'\ n'（换行符）？它适用于格式化字符串（反正文本节点）。 – 2011-04-17 21:38:02

@Matt：因为文本节点中的新行不会被浏览器渲染为换行符。 – 2011-04-17 22:56:43

我建议只是这样做：

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

什么是 “有条件的断行”？我没有看到代码中的任何内容决定何时打破该行...

来源

2011-04-17 21:18:31 Ryan

也许这是特殊的“魔术”连字符，只有浏览器必须打破 - ''或''我认为 – Pointy 2011-04-17 21:37:02

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

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

来源

2011-04-17 23:06:40

哦，这是完美的作品。正是我在找什么。非常感谢。 – Paulx 2011-04-17 23:38:10

将br插入到textnode中

回答

相关问题