javascript - 如何使用正则表达式突出显示字符串中的多个关键字/词？

Question

我有以下案例要解决。

在短语中突出显示关键字的 Javascript 方法。

 vm.highlightKeywords = (phrase, keywords) => {
  keywords = keywords.split(' ');
   let highlightedFrase = phrase;

   angular.forEach(keywords, keyword => {
       highlightedFrase = highlightedFrase.replace(new RegExp(keyword + "(?![^<])*?>)(<\/[a-z]*>)", "gi"), function(match) {
           return '<span class="highlighted-search-text">' + match + </span>';
       });
   });

   return $sce.trustAsHtml(highlightedFrase)
 }

如何编写匹配这种情况的正则表达式，以便我可以替换子字符串

keyowrds = 'temperature high'

phrase = 'The temperature is <span class="highlight">hig</span>h'

正则表达式大小写

https://regex101.com/r/V8o6gN/5

Answer 1

如果我没记错的话，您基本上是想找到属于您的 keywords 变量中的每个单词，并将它们匹配到您的字符串中，这样您就可以将它们包装在一个范围内。

您需要先将关键字转换为 RegExp，然后进行全局匹配。像这样:

const keywordsString = "cake pie cookies";
const keywords = keywordsString.split(/\s/);

// equivalent to: /(cake|pie|cookies)/g
const pattern = new RegExp(`(${keywords.join('|')})`, 'g'); 

const phrase = "I like cake, pie and cookies";

const result = phrase.replace(pattern, match => `<span>${match}</span>`);

console.log(result);

基本上，您需要一种模式，其中您的关键字是管道 (|) 分隔并括在括号 (()) 中。然后您只想进行全局搜索(g 标志)以便匹配所有这些。

有了全局标志，就不需要做循环了。您可以一次搞定所有这些。