如何在不破壞標籤的情況下突出顯示html字符串中的文本？

問題：給定任何html字符串，如何突出顯示文本中的子字符串，但確保標籤未被觸動？如何在不破壞標籤的情況下突出顯示html字符串中的文本？

例如更換子「棕色」：

str='<img src="brown fox.jpg" title="The brown fox" /><p>some text containing brown.</p>';

或

str='<p>some <span style="color:brown">text containing brown</span></p>';

如何突出顯示文本的子棕色，而不是標籤內（避免打破標籤。

此問題最初出現在這裏作爲回答How to highlight text using javascript

我的解決方案是沿着標籤分割字符串，並且只替換數組中奇怪的部分（在標籤之間），但是我想知道是否有任何陷阱（我能想到的一個是無效的html，但應該處理前處理文本IMHO）

var str='<p>some <span style="color:brown">text containing brown</span></p>'; 

//split along tags 
var parts = str.split(/[<>]+/); 

//remove empty 
parts = parts.filter(function(n){ return n != ""}); 

for (var i = 0; i < parts.length; i++) { 
if (i%2 !== 0) 
//console.log(parts[i]); 
parts[i] = parts[i].replace("brown", "red whatever"); 
} 

console.log(parts);

輸出

["", "p", "some ", "span style="color:brown"", "text containing red whatever", "/span", "", "/p", ""]

來源

2015-04-01 giorgio79

自閉標籤將是一個問題：
。我儘量使用jQuery和選擇器儘可能爲這些替換，然後導出生成的dom html。 – roded 2015-04-01 10:14:40

假設你可以訪問DOM而不是直接操縱字符串，則可以通過執行

$(selector).text()

訪問任何DOM節點的文本

指定的文本到一個變量，並操縱你的心內容，然後調用

$(selector).text(variable)

改變DOM中的文本。

來源

2016-12-19 14:33:19

回答

相關問題