How to highlight overlapping strings in javascript?

user_3636730 0
Viewed 115

Let's say we have a string:

"The quick brown fox jumps over the lazy dog"

You search within that string for "ove ver".

The result should be that the word "over" is highlighted.

My code so far:

'The quick brown fox jumps over the lazy dog'
    .replace(/ove|ver/g, s => s.replace(/\w/g, '<mark>$&</mark>'))

The result should be similar to this demo on regex101.

EDIT: Searching for "o" shouldn't highlight the string till the next word boundary. Searching for "o" should result in: "The quick br<mark>o</mark>wn f<mark>o</mark>x jumps <mark>o</mark>ver the lazy d<mark>o</mark>g"

highlight match javascript regex string
2 Answers

You can use that lookahead assertion but match a full word and highlight it:

const s = 'The quick brown fox jumps over the lazy dog';

var r = s.replace(/(?=ove|ver)\w+/g, '<mark>$&</mark>');

console.log(r);
//=> The quick brown fox jumps <mark>over</mark> the lazy dog

user_5482250

You could also search for a partial match using the alternation inside a non capture group (?:ove|ver) surrounded by optional word characters \w*

const regex = /\w*(?:ove|ver)\w*/g;
const s = 'The quick brown fox jumps over the lazy dog';

console.log(s.replace(regex, "<mark>$&</mark>"));

user_54249880
Related