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

回答

相关问题