javascript需要帮助在html中突出显示标签文本

Question

查看我的演示，我有 html 文本：

<div id="test">this is <a href="#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

我看到了一个如何在 html 标签中突出显示字符串的示例，但如果我只搜索两个单词，它会部分工作，但如果搜索两个以上的单词，它只会突出显示第一个单词和最后一个单词，就像这个演示一样：

var src_str = $("#test").html();
var term = "my nice cool text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*|)((<[^>]+>)+|[\\r\\n\\s]+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <a href="#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

您可以看到第一个字符串“nice cool”，其中包括未突出显示的 html 标签，第二个在最后一个正则表达式中起作用，我无法解决任何帮助，谢谢..

解决方案：

我发现我很疯狂，但我不确定它是如何工作的，但无论如何它的工作是演示：

var src_str = $("#test").html();
var term = "my nice cool top text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<span class=hit>$1</span>");
//alert(src_str);
src_str = src_str.replace(/(<span class=hit>[^<>]*)((<[^>]+>)+|[\\r\\n\\s]+)([^<>]*<\/span>|(<[^>]+>|[\\s]+)*)/,"$1</span>$2<span class=hit>$3$4");

$("#test").html(src_str);

.hit{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <div>

<a href="#"><br>my<br></a><span>
<br>
nice</span> <span> <br>cool<div>top</div></span> text that needs highlighting my nice <span>cool top</span> text</div>

</div>
 

更好的解决方案：

var src_str = $("#test").html();
var term = "my nice cool text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

document.body.innerHTML = document.body.innerHTML.replace(pattern, function(match){
var re = /(^|[>])(?![^<]*?<\/y)(.*?)([<]|$)/gi; 
match = match.replace(/(\r\n\t|\n|\r\t)/gm,"");

match = match.replace(re, function (m,g1,g2,g3) {
  return g1+"<b class='hit' style='color:black'>"+g2+"</b>"+g3;
});
//alert(match);
return match;
});

.hit{
background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <a href="#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

有一些找到的解决方案可以在旧浏览器中使用，我想你可以检查一下：

https://github.com/padolsey/findAndReplaceDOMText

Answer 1

不确定这是否会在所有情况下解决您的问题，但这应该适用于这种特殊情况：

var src_str = $("#test").text().replace(/\s\s+/g, ' '); //remove more than 1 space
var term = "my nice cool text";

var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");

$("#test").html(src_str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <a href="#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>