【问题标题】：RegExp to search text inside HTML tags正则表达式搜索 HTML 标签内的文本
【发布时间】：2017-02-01 00:40:15
【问题描述】：

我在使用 RegExp 搜索 HTML 标记之间的文本时遇到了一些困难。这是用于在 HTML 页面上搜索文本而不在 HTML 的标签或属性中找到匹配的字符的搜索功能。找到匹配项后，我用 div 将其包围，并为其分配一个突出显示类以突出显示 HTML 页面中的搜索词。如果 RegExp 也匹配标签或属性，则 HTML 代码正在损坏。

这是 HTML 代码：

<html>
<span>assigned</span>
<span>Assigned > to</span>

<span>assigned > to</span>

<div>ticket assigned to</div>

<div id="assigned" class="assignedClass">Ticket being assigned to</div>

</html>

我想出的当前正则表达式是：

(?))赋值(?!\)/gi

如果分配或分配匹配是标签中文本的开始，但不在其他标签上。它可以很好地忽略属性和标签，但如果文本不以搜索字符串开头，则效果不佳。

有人可以帮我吗？我已经为此工作了一个小时，但找不到解决方案（RegExp noob here..）

更新 2

https://regex101.com/r/ZwXr4Y/1 显示有关 HTML 实体和 HTML cmets 的剩余问题。

搜索时留下的问题是&nbsp;没有被忽略，HTML实体和cmets中的所有文本都应该被忽略。因此，在搜索“b”时，即使 HTML 实体正确位于 HTML 标记之间，它也不应该匹配 &nbsp;。

【问题讨论】：

在> 和下一个< 之间搜索文本 - 类似于：/>([\w> ]+?)</g。 Regex101

标签： html regex search

【解决方案1】：

更新 #2

正则表达式：

(<)(script[^>]*>[^<]*(?:<(?!\/script>)[^<]*)*<\/script>|\/?\b[^<>]+>|!(?:--\s*(?:(?:\[if\s*!IE]>\s*-->)?[^-]*(?:-(?!->)-*[^-]*)*)--|\[CDATA[^\]]*(?:](?!]>)[^\]]*)*]])>)|(e)

用法：

html.replace(/.../g, function(match, p1, p2, p3) {
    return p3 ? "<div class=\"highlight\">" + p3 + "</div>" : match;
})

Live demo

解释：

当您经历更多不同的情况时，我不得不修改 RegEx 以涵盖更多可能的情况。但现在我带着这个几乎涵盖了所有情况。它是如何工作的：

捕获所有<script> 标签及其内容
捕获所有CDATAblocks
捕获所有 HTML 标签（打开/关闭）
捕获所有 HTML cmets（以及 IE if 条件语句）
捕获所有 targeted 字符串定义在剩余文本中的最后一个组中（这里是 (e))

这样做可以让我们快速操纵我们的目标。例如。将其包装在使用部分中表示的标签中。谈到性能方面，我试图以一种表现良好的方式来编写它。

此 RegEx 不能 100% 保证匹配正确的位置（99% 可以），但它应该在大多数情况下给出预期的结果，并且可以在以后轻松修改。

【讨论】：

这效果更好，谢谢！但是，如果您现在搜索“s”，它会被标记两次，因为assigned 有两个。所以 ss 被突出显示。是否可以在第一场比赛后停止？所以只有“s”被匹配（但对HTML中的每个实例都匹配，不只匹配一次）？
当您搜索s 时，您肯定是指所有s 字母。为什么要突出显示一行s 字母中的一个s？
对不起！你是绝对正确的。另一个问题是文本也不能在 CDATA 标记内， // 因为我对文本的更改会破坏脚本。你能帮我解决这个问题吗？
脚本标签之间的检查也可能更好
不能包含，CDATA 标签也是如此，因为搜索从一个字符开始，然后我有问题

【解决方案2】：

试试这个

Live Demo

string.match(/<.{1,15}>(.*?)<\/.{1,15}>/g)

这意味着 <.>(.*?){1,15}> html 标记之间的任何内容

 <any> Content </any>

将是目标或结果，例如

 <div> this is the content </content>

“这是内容”这是结果

【讨论】：