如何在HTML文本中搜索特定文本并用颜色突出显示搜索字符串

本文关键字:搜索 文本 颜色 字符串 显示 HTML | 更新日期: 2023-09-27 18:28:57

我们需要搜索HTML文本并用特定颜色突出显示文本。

例如:html字符串是

<p class="Pa0" style="margin: 0in 0in 0pt;"><span class="A1"><span style="font-size: 10pt;">Giving this flyer to your class customers</span></span></p>

在上面的文本中,我正在搜索单词"Class"。它应该在文本"将此传单交给您的班级客户"中突出显示文本班级但是,尽管它试图突出显示css元素"class",结果原始html文本已损坏,无法正确显示。

有人能帮助我解决这个问题吗?如何在不更改原始HTML的情况下搜索HTML文本中的内容并突出显示搜索。

如何在HTML文本中搜索特定文本并用颜色突出显示搜索字符串

(class)(?=(?:[^><]*<[^<>]*>)*[^><]*$)

试试这个。替换为<span style='color: red;'>$1<span>。请参阅演示。

http://regex101.com/r/bB8jY7/3

使用javascript:是可能的

var str = document.getElementByClassName("Pa0")[0].children[0].children[0];
str.innerHTML = str.innerHTML.replace(' class ', ' <span style="color:red">class</span> ')