如何在不打断标记的情况下突出显示html字符串中的文本

How to highlight text in a html string without breaking tags?

本文关键字：显示 html 字符串 文本 情况下      更新时间：2023-09-26

问题：给定任何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 突出显示文本

我的解决方案是沿着标签拆分字符串，只替换数组中（标签之间）奇怪的部分，但我想知道是否有gotcha（我能想到的是无效的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", ""]

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

$(selector).text()

将文本分配给一个变量，并根据你的内心内容对其进行操作，然后呼叫

 $(selector).text(variable)

以更改DOM中的文本。

相关文章：