如何在不破坏标签的情况下突出显示html字符串中的文本？

Question

问题：给定任何html字符串，如何突出显示文本中的子字符串，但要确保未更改标签？

例如，替换子字符串“ brown”：

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>';

如何在文本中将子字符串突出显示为棕色，而不是在标签内部突出显示（以避免破坏标签。

这个问题最初是作为回答出现在这里的。 如何使用javascript突出显示文本

我的解决方案是沿标记拆分字符串，并仅替换数组中奇数部分（在标记之间），但是我想知道是否有任何陷阱（我能想到的是无效的html，但是应该事先处理）处理文本恕我直言）

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", ""]

Answer 1

假设您可以访问DOM而不是直接操作字符串，则可以通过执行以下操作来访问任何dom节点的文本

$(selector).text()

将该文本分配给变量，然后将其操作到您的内心内容，然后调用

 $(selector).text(variable) 

更改DOM中的文本。