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

【问题标题】：How to search a particular text within an HTML Text and highlight the search string with a color如何在 HTML 文本中搜索特定文本并用颜色突出显示搜索字符串
【发布时间】：2014-12-30 04:22:36
【问题描述】：

我们需要搜索 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 元素“类”，结果原始 html 文本已损坏且无法正确显示。

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

【问题讨论】：

不改变原来的HTML？不可能。
不应该用一些 JavaScript 来实现吗？通过id/class获取元素并更改innerHTML
最终结果应该类似于
将此传单送给您的类客户
@verbose-mode 这可以是动态 HTML。所以我可能无法搜索 id 来检查 innerHTML
发布你目前所做的事情。

标签： c# html css regex search

【解决方案1】：

使用 javascript 是可能的：

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

【讨论】：

感谢您的帮助。但我想我应该稍微详细说明一下这个问题。用户将能够输入任何类型的 HTML 文本。我给出的任何内容都只是为了示例，实际情况就像有一个 html 文本，在没有突出显示“类”或“样式”等 html 元素的情况下，我需要突出显示其中的原始内容。
@NaveenMaverick 但是您在 cmets 中提供了示例。这不是你想要的？
是的，但正如我所说，在示例中没有规定 html 是相同类型的。它可以包含任何标签或类。我正在寻找的是在任何 HTML 文本中搜索某些字符串并用某种颜色突出显示 html 字符串中的字符串的通用解决方案。
@Nav 但这是通用解决方案！

【解决方案2】：

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

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

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

【讨论】：

太棒了！！！这就是我一直在寻找的。让我试试这个。希望我可以通过这个实现所需的功能。
我很乐意将此标记为已回答，因为这非常接近要求。但是，在使用替换功能时，我发现一件事很奇怪。在我尝试如下的 URL 中，正则表达式是 Class(?=(?:[^>]*>)*[^>将此传单给您的 CLASS 客户结果字符串是
给这个传单给您的 class customers
在结果字符串中，字符串的原始大小写（即 UPPER）已更改（降低）。
我们怎样才能保留它？？？如果我们不这样做，那么在执行搜索后原始字符串将被更改，这就像 QA 的错误 :(
你这个摇滚伙伴！！！！很抱歉，我无法为此投票。但我已将此标记为已回答...谢谢