JavaScript RegExp - 如何根据条件匹配单词

Question

我正在构建一个搜索结果页面(以 Angular 形式)，但使用正则表达式根据条件突出显示搜索的“关键字”。我在使用 RegExp 获取正确条件时遇到问题，因此，如果我当前的语法很困惑，我深表歉意，我已经玩了几个小时了。

基本上，对于这个测试，我突出显示“midlands”一词，并且我想突出显示除“a”标签内的单词之外的每个“midlands”单词 <a /> href=""属性的。因此，我不想突出显示 URL 之外的任何内容，因为我会将关键字包装在一个跨度内，这会破坏 url 结构。有人可以帮忙吗？ - 我想我已经快到了。

这是我当前使用的正则表达式:

/(\b|^|)(\s|\()midlands(\b|$)(|\))/gi

这是一个测试我所追求的内容的链接。 https://regex101.com/r/wV4gC3/2

更多信息，在 View 渲染后，我抓取重复结果的 html 内容，然后根据渲染的 html 和上述条件进行搜索。 - 如果这对任何人有帮助。

Answer 1

你的想法全错了。不要使用正则表达式解析 HTML - 使用 DOM 内置的 HTML 解析器并在文本节点上显式运行正则表达式。

首先我们获取所有文本节点。使用 jQuery 就是:

var texts = $(elem).content().get().filter(function(el){
    return el.nodeType === 3; // 3 is text
});

否则 - 请参阅答案 here用于获取 VanillaJS 中所有文本节点的代码。

然后，迭代它们并仅替换文本节点中的相关文本:

foreach(var text of texts) { // if old browser - angular.forEach(texts, fn(text)
    text.textContent = text.textContent.replace(/midlands/g, function(m){
       return "<b>" + m + "</b>";  // surround with bs. 
    });
}