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

Question

I have the following case that I am trying to solve.

Javascript Method that highlights keywords in a phrase.

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

How can I write a regular expression that will match this case so that I can replace the substrings

keyowrds = 'temperature high'

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

ReGex Case

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

Answer 1

If I'm not mistaken, your basically wanting to find each word that is a word in your keywords variable and match them in your string so you can wrap them in a span.

You'll want to first turn your keywords into a RegExp, then do a global match. Something like this:

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

Basically, you want a pattern where your keywords are pipe ( | ) separated and wrapped in parentheses ( () ). Then you just want to do a global search ( g flag) so you match all of them.

With the global flag, there is no need to do a loop. You can get them all in one shot.

Answer 2

Based on @samanime answer. I remove duplicates, trim spaces and highlight longer words first.

The only problem is a matches that span an element boundary. For example ["elem", "lemen"] in "The element"

const tokens = [...new Set(state.highlight.split(' '))]
       .map(s => s.trim())
       .filter(s => s.length)
       .sort((a,b) => b.length - a.length);

const pattern = new RegExp(`(${tokens.join('|')})`, 'ig');
const highlighted = this.state.value.replace(pattern, match => `<b>${match}</b>`);

console.log(highlighted);