JavaScript上的正则表达式如何在正后方和正前方添加全词搜索和不区分大小写

Question

我需要对一个项目进行一些调整，这个项目是关于搜索整个单词并改变它们在段落中的风格。网上也有类似的问题，但我发现在这种情况下答案仍然不起作用

//text contains words
const text=" there are some keywords that need to be found and changed. key is a different word."
//words need to be whole search
const words=["keywords","key","need"] 
//split the text by words, after the split if the element match words then change style  
const ChangeStyle=(text, words)=>{
return ({text.split(new RegExp(`(?<=${words.join("|")})|(?=${words.join("|")})`))
.map((element)=>{ return words.include(element)?(<span style={{color:red}}>{element}</span>):
{element}
})})
}

问题是在使用单词数组中的所有单词后进行拆分。甚至是"；关键字"；在文本中；键"；，分成"；键"；以及"；单词"；。使得"；关键字"；它本身永远不会被发现并改变风格。在这种情况下；键"；以及"；需要"；将在文本中找到并更改样式。我试着对单词数组进行排序，结果是一样的。

在正则表达式"中；(\bword[\s.]("我认为可以完成整个单词搜索工作(找到以单词边界开始、以句点或空格结束的"单词"(。

在这种情况下，如果我想保留拆分逻辑，我如何将其组合起来"\b字[\s.]"；到上面的regExp中，这样它就可以进行全词拆分和不区分大小写了吗

Answer 1

如果使用replace而不是"split"，它将替换下一个单词。工作示例：

const text = " there are some keywords that need to be found and changed. key is a different word.";
const words = ["keywords","key","need"];
const ChangeStyle = (text, words) => {
let re = new RegExp('\b(' + words.join('|') + ')\b', 'g');
return text.replace(re, function(m) {
return '<span style="{{color:red}}">' + m + '</span>';
});
}
console.log(ChangeStyle(text, words));

输出：

there are some <span style="{{color:red}}">keywords</span> that <span style="{{color:red}}">need</span> to be found and changed. <span style="{{color:red}}">key</span> is a different word.

正则表达式的解释：

• '\b('-单词边界(注意字符串定义中的转义反斜杠(和组的开头
• words.join('|')-你的单词或组合
• ')\b'-组结束和字边界
• 'g'-替换所有出现的全局标志