Question

我正在构建搜索结果页面（在Angular中），但使用正则表达式根据条件突出显示搜索到的“关键字”。我在使用正确的条件时遇到了RegExp的问题，所以如果我当前的语法很混乱，我已经玩了好几个小时了。

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

这是我正在使用的当前RegExp：

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

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

进一步信息，在视图渲染后，我抓住重复结果的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. 
    });
}

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

1 个答案: