Highlight all word matches of sentence of text JavaScript

Question

I am trying to highlight all text that match any word of my search text.

Assume search text all text

My query return all record which text contains any of word of above text (Same as text search in MSSQL)

Now i need to highlight all matches with any word in search. My current code can highlight only full text.

My Current Code:

getHighlightedText(text, higlight) {
  let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
  return <span> { parts.map((part, i) => 
    <span key={i} style={part.toLowerCase() === higlight.toLowerCase() ? { color: '#93C74B' } : {} }>{part}</span>)
  } </span>;
}

Thanks in advance.

score 3 · Accepted Answer · answered Apr 18 '18 at 07:32

You can do this using replace, here is an example:

const getHighlightedText = (text, higlight) => {
  let groups = higlight.split(" ").map(v => `(${v})`).join("|");
  return "<span>" + text.replace(new RegExp(groups, "gi"), g => `<span style="color:#93C74B">${g}</span>`) + "<span>";
}
let text = "Some text for testing";
let higlight = "TEXT testing";
document.write(getHighlightedText(text, higlight));

What this does is to first generate a regex from the searched string, regex that has this structure (word1)|(word2)...., then replace is used to replace all these words with <span> elements that have a different text color. If you want to learn more about using replace with a function you can do that HERE

score 0 · Answer 2 · answered Apr 18 '18 at 07:34

0

It can simply be done by method replace:

getHighlightedText(text, higlight) {
   let kws = higlight.replace(/ /g, "|");
   return text.replace(new RegExp(`(${kws})`, "gi"),
        '<span key="$1" style="color: #93C74B;">$1</span>');
}

answered Apr 18 '18 at 07:34

terry.qiao

1,959
2
8
10

I am using react. Function return me html, i need react element to be returned. – Wajahat Qasim Apr 18 '18 at 07:51

zer00ne · Answer 3 · 2018-04-18T08:41:02.277

In this Demo, I wrote a custom function that uses a dynamic RegExp Object so it can be reused. It uses replace() and it does the following:

Takes 2 parameters:

 1. a String that needs to be searched

 2. a variable String that will be interpolated inside of a RegExp Object.

 3. Every match will be wrapped in a `<mark>` tag.

The syntax for a RegExp is different than a Regex Literal, one important difference is escaping by \ is needed even for meta flags like \w needs to be escaped like so: \\w.

Demo

var str = document.querySelector('main').innerHTML;

function markText(str, qry) {
  var rgx = new RegExp('\\b' + qry + '\\b', 'gi');
  var res = str.replace(rgx, `<mark>${qry}</mark>`);
  return res;
}

document.querySelector('main').innerHTML = markText(str, "Chuck Norris");

<main>
<p>Scientists believe the world began with the "Big Bang". Chuck Norris shrugs it off as a "bad case of gas". Chuck Norris actually can get blood from a turnip...and from whatever the hell else he wants. There is no chin behind Chuck Norris' beard. There is only another fist. Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris' first job was as a paperboy. There were no survivors Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia. Chuck Norris can slam a revolving door If Chuck Norris kicks a tree in a forest and no one was around, he chooses who he wants to hear it.</p>

<p>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face. Chuck Norris is the reason why Waldo is hiding.</p>

</main>

Highlight all word matches of sentence of text JavaScript

3 Answers3

Demo

Linked