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

Question

以前曾询问过此问题的变体，但我找不到任何特定于我要查找的内容的内容。我对正则表达式很糟糕，我认为我的问题主要在于那里。我有一个简单的 Angular 指令（我在网上找到的，以前从未使用过指令），它突出显示我在后端 MySQL 存储过程的结果中搜索的任何字符串。问题是，它只有在我搜索一个词时才有效。

例如，如果我搜索“network”，它会将字符串“network”的每个实例包装在一个跨度中，并在我指向该指令的任何位置使用一个类。但是，如果我搜索“网络驱动器”，它不会突出显示任何内容，因为它正在专门寻找该字符串。

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

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

我试图将searchedWord 设为一个字符串数组或一个字符串，然后将 span 元素应用于每个匹配的字符串，但结果却让事情变得更糟。

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

谢谢！

Answer 1

我建议：

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

这是一个代码 sn-p，您可以调整它以在您的代码中使用：

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