Question

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

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

上面的代码匹配href内部的git和anchor标记的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的重生！

为了避免这种情况，您需要自己修改文本节点。但是，而不是使用jQuery重新转换轮here's文本突出显示器插件的比较。唯一使用纯JavaScript的是mark.js。由于您使用的是React，我建议您使用它。

您的情况示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于您的界面，您可以查看this example。

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

搜索字符串但忽略标记

2 个答案: