JavaScript highlight substring(s) within string

I have a JavaScript String which looks like this:

From Windows to Linux

With JavaScript, how can I highlight the words From and Linux, via a substring which looks like this:

From Linux

so the string looks like this in the end:

<mark>From</mark> Windows to <mark>Linux</mark>

This is my current implementation of the function to do that job:

  function highlightSearchTerm(string, substring) {
    const regex = new RegExp(`(${substring})`, 'ig');
    return string.replace(regex, '<mark>$1</mark>');
  }

I call it like this:

highlightSearchTerm("From Windows to Linux", "from linux")

It works well, the only thing that is missing is to make it work when the substring has words which are not directly next to each other.

These substrings for instance work:

• from windows
• From
• to Linux

While these don't (Words are not directly next to each other in the main string):

• Windows Linux
• from To
• Linux from

Short Answer

Call highlightSearchTerm() with a pipe(|) between the terms to achieve the desired output.

Longer Answer

The answer has to deal with how you are building your Regex.

The function

function highlightSearchTerm(string, substring) {
    const regex = new RegExp(`(${substring})`, 'ig');
    return string.replace(regex, '<mark>$1</mark>');
  }

It's important to understand what the corresponding RegExp object that is created reads like, and how it equates to a form that we would maybe write out directly.

First, if we call

// assume substring = 'hello';
new RegExp(`(${substring})`, 'ig');
// Equivalent: /(hello)/ig;

Notice that the grouped item is looking for the word hello.

Now, if we supply something that has multiple things we want in it, such as hi and you then if we supply them as a single string separated by space, e.g.

const substring = 'hey you';
new RegExp(`(${substring})`,'ig');
// Equivalent: /(hey you)/ig

This will not give us what we want because instead of looking for hey or you, the parser is now looking hey you as a phrase.

However, if we separate those things by a pipe (|) we get

// assume substring = 'hey|you';
new RegExp(`(${substring})`,'ig');
// Equivalent: /(hey|you)/ig

This now looks for either hey or you in the string. This is because the pipe character in RegEx is the OR.

If you'd like to expand the search for multiple phrases, you separate each specific one by a pipe, e.g.

new RegExp('(hey|you|that guy)', 'ig');

Will search for the words hey and you and the phrase (space included) that guy.

You can use the Pipe | just like @Jhecht explained above, alternatively you can split your substring and doing it this way:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function highlightSearchTerm(string, substring) {
  let arr = substring.split(' ');

  arr.forEach(el => {
      const regex = new RegExp(el, 'ig'),
            temp = el;
            
      el = el.replace(regex, `<mark>${el}</mark>`);
      string = string.replace(temp, el);
  })
  return string;
}

let text = document.querySelector('div').innerHTML;

document.querySelector('div').innerHTML = highlightSearchTerm(text, 'From Linux');

<!-- language: lang-html -->

<div>From Windows to Linux</div>

<!-- end snippet -->

this is how you return true or false if your text includes the substring

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let text = document.querySelector('div').innerHTML;

function isIncludesSubstring(text, substring){
  let arr = substring.split(' '),
      arrResult = [];
  arr.forEach(el => {
    const regex = new RegExp(el, 'ig');
    arrResult.push(regex.test(text));
  });
  
  /* arrResult includes true or false based on whether substring single word
     is included in the text or not, the function will return true if all words are included
     else it will return false */
  return arrResult.includes(false) ? false : true;
}

console.log(isIncludesSubstring(text, 'From Windows Linux'))

console.log(isIncludesSubstring(text, 'To Windows from'))

console.log(isIncludesSubstring(text, 'From Test Linux'))

<!-- language: lang-html -->

<div>From Windows to Linux</div>

<!-- end snippet -->