搜索字符串但忽略标签[重复]

Question

我正在尝试搜索字符串的出现，但如果它们是锚标记的一部分，则不想匹配它们。

var str = 'hey there. <a href="github.com">github.com/bvaughn</a>';
str.match(/git/gi)

上面的代码匹配了 git inside href 和锚标签的 innerHTML。我想忽略第一场比赛。忽略打开和关闭选项卡，但仍搜索 innerHTML。

这可以通过修改正则表达式来完成吗？我已经尝试了几种组合，但我只是没有得到正确的结果。

更新

让我解释一下我的实际用例。我正在尝试创建类似于 chrome 中内置搜索的搜索界面，我们在其中突出显示页面中出现的文本。为此，我使用了一个反应组件 - react-highlight-words。这对于普通文本非常有效，但我想在突出显示它们之前自动链接文本中的 url。

在文本中包含标记并将其传递给上述组件会弄乱标记，因为它也匹配其中的字符。所以我希望它忽略锚标记的开始和结束标记，但考虑其余部分。

This is where the relevant matching happens. 我希望我能以某种方式调整正则表达式以忽略锚标记。

Answer 1

试试这个正则表达式：

var str = 'hey there. <a href="github.com">github.com/bvaughn</a>';
str = str.replace(/<.*>(.*)<\/.*>/g, "$1")
console.log(str);
str.match(/git/gi)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

老实说，我对问题和答案感到恼火。这个话题在 SO 上已经讨论了几十次了。

首先，您应该不使用 mike510a 的答案。 JuniorNunes7 的答案只应在您的内容不在 DOM 中的情况下使用。原因如下：

• innerHTML 会破坏事件！
• innerHTML 将触发 DOM 的重新生成！

为了避免这种情况，您需要修改文本节点本身。但是，不是重新反转轮子here's，而是使用 jQuery 比较文本荧光笔插件。唯一使用纯 JavaScript 的是mark.js。由于您使用的是 React，我建议您使用它。

您的情况示例：

new Mark(document.querySelector(".context")).mark("git");

<script src="https://cdn.jsdelivr.net/mark.js/8.4.0/mark.min.js"></script>
<div class="context">
  hey there. <a href="github.com">github.com/bvaughn</a>
</div>

您的界面可以查看this example。

它还可以选择忽略特定元素内的匹配项，例如链接。