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

Question

以前有人问过这方面的变体，但我找不到任何具体的东西。我和雷吉克斯相处得很糟糕，我想我的问题主要就在那里。我有一个简单的Angular Directive(我在网上找到的，以前从未使用过Directive(，它突出显示了我在后端MySQL存储过程的结果中搜索到的任何字符串。问题是，只有当我搜索一个单词时，它才会起作用。

例如，如果我搜索"；网络"；它将包装字符串"的每个实例；网络"；在我将指令指向的任何地方都有类的跨度中；网络驱动器"；它不会突出显示任何内容，因为它正在专门查找该字符串。

以下是指令中具有此功能的部分：

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

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

任何朝着正确方向的推动都将不胜感激。

谢谢！

Answer 1

我建议：

• 将搜索词保持在某种关联数组中
• 创建一个基于|交替运算符的动态正则表达式模式，以匹配所有搜索到的单词，同时将较长的单词放在第一位，将较短的单词排在最后(即，搜索单词列表必须按长度降序排序(
• 在将搜索到的单词放入regex模式之前，不要忘记转义它们
• 当搜索到的单词在文本中匹配时，使用箭头函数(或回调方法(，并根据初始数组中的搜索单词获取类

下面是一个代码片段，您可以调整它以在代码中使用：

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