Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

177
Views
How to highlight overlapping strings in javascript?

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"

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!