javascript - 如何在不破坏标签的情况下突出显示 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>';

如何在文本中突出显示棕色的子字符串，但不在标签内(以避免破坏标签。

这个问题最初作为答案出现在这里 How to highlight text using 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 中的文本。