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

问题：给定任何html字符串，如何突出显示文本中的子字符串，但确保标记未被触及

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

---

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

$(selector).text()

将该文本指定给一个变量，并对其进行处理， 然后打电话

 $(selector).text(variable) 

---

要更改DOM中的文本。

自动关闭标记将是一个问题：
。对于这些替换，我会尽量使用jquery和选择器，然后导出生成的dom 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", ""]

$(selector).text()

 $(selector).text(variable)