Angular 突出显示多个搜索查询的指令

Question

以前有人问过这个问题的变体，但我找不到任何与我正在寻找的内容相关的内容。我对正则表达式很糟糕，我认为我的问题主要在于此。我有一个简单的 Angular 指令（我在网上找到的，以前从未使用过指令），它突出显示了我在后端 MySQL 存储过程的结果中搜索的任何字符串。问题是，只有我搜索一个词，它才会起作用。

例如，如果我搜索“network”，它会将字符串“network”的每个实例包装在一个带有 class 的范围内，我将指令指向任何地方。但是，如果我搜索“网络驱动器”，它不会突出显示任何内容，因为它正在专门寻找该字符串。

这是具有此功能的指令部分：

  getFormattedText() {
    const re = new RegExp(`(${this.searchedWord})`, 'gi');
    return this.content.replace(re, `<span class="${this.classToApply}"></span>`);
  }

我试图使 searchedWord 一个字符串数组或一个字符串，然后将 span 元素应用于每个匹配的字符串，但我最终使事情变得更糟。

非常感谢任何朝着正确方向的推动。

谢谢！

Answer 1

我建议：

将搜索词保存在某种关联数组中
基于|交替运算符创建一个动态正则表达式模式来匹配所有搜索词，同时将较长的词放在前面，较短的词放在最后（即搜索词列表必须按长度降序)
不要忘记在将搜索到的词放入正则表达式模式之前对其进行转义
当搜索词在文本中匹配时，使用箭头函数（或回调方法）从初始数组中获取搜索词的class。

这是您可以调整以在您的代码中使用的代码片段：

const content = "When connected to Network, you can save the data on the network dRive.";
const items = [
    {'searchedWord': 'network', 'classToApply':'blue'},
    {'searchedWord': 'network drive', 'classToApply':'red'}
];

const arr = items.map(x => x.searchedWord.toLowerCase());
arr.sort((x,y) => y.length - x.length);
const re = new RegExp( arr.map(x => x.replace(/[-\/\^$*+?.()|[\]{}]/g, '\$&')).join("|"), "gi");

function getClassBySW(sw) {
    return items.find(x => x.searchedWord == sw.toLowerCase()).classToApply;
}
function getFormattedText() {
    return content.replace(re, (m) => `<span class="${getClassBySW(m)}">${m}</span>`);
}

const highlightedContent = getFormattedText();
document.body.innerHTML = highlightedContent;
console.log( highlightedContent )

.red {
  color: #FF0000;
}

.blue {
  color: #0000FF;
}

Angular 突出显示多个搜索查询的指令

Angular Highlight Directive to Highlight Multiple Search Queries

angular

regex

search

highlight

angular-directive