Question

问题：给定任何html字符串，如何突出显示文本中的子字符串，但确保标记不受影响？

例如，替换子串＆＃34; brown＆＃34;：

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中的文本。

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

1 个答案: