將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中

回答

相關問題