RegExp case insensitive multi word highlight

Question

I am trying to get highlighting on keyword searching working right. A couple issues I am having.

1. Case insensitive is working for the first word, but would like it to replace with original case word, not the lowercase searched word.

i.e. search trend, it replaces Trend with trend, I know why, but would like to figure out how to replace back the found word, not the searched word

2. The second word is not matching case insensitive.

i.e. search trend micro is not matching trend Micro.

Here is jsFiddle: http://jsfiddle.net/hh2zvjft/1/

if ($(".ProjectSearch").val().length > 0) {
    var searchedText = $(".ProjectSearch").val();
    var wordList = searchedText.split(" ");
    $.each(wordList, function (i, word) {
        $(".ProjectTaskGrid:contains('" + word + "')").each(function (i, element) {
            var rgxp = new RegExp(word, "gi");
            var repl = '<span class="search-found">' + word + '</span>';
            element.innerHTML = element.innerHTML.replace(rgxp, repl);
        });
    });
}

Can you please help identify the issues, and offer improvements? Thanks!

Some refererences used to arrive at code:

https://stackoverflow.com/a/120161/2727155

https://stackoverflow.com/a/10011639/2727155

Answer 1

Highlight multiple words (ignore HTML tags)

const regEscape = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const EL_input = document.querySelector("#input");
const EL_area = document.querySelector("#area");
const org = EL_area.innerHTML; // Store the current HTML state

const highlight = () => {
  const val = EL_input.value;
  
  if (!val) return EL_area.innerHTML = org;
    
  const pts = regEscape(val.trim()).split(/ +/);
  const reg = new RegExp("(?![^<]+>)(" + pts.join("|") + ")", "ig");
  const res = org.replace(reg, '<span class="highlight">$1</span>');
  
  EL_area.innerHTML = res;
};

EL_input.addEventListener("input", highlight);
highlight();

div {
  padding: 5px;
  border: solid 1px #CCC;
}

.highlight {
  background: gold;
}

<input id="input" autocomplete=off type="text" value="tren pan com br" />

<div id="area">
  Renew Trend Worry-Free Business Security license
  that <a href="http://someweb.com">someweb.com</a> will expire in 60 days.<br>
  Activate BR like breakline trend
  and [ confirm <span>SOME <span>SPAN</span> IS HERE</span>
  upon electronic<br> delivery notification
  from Trend Micro
</div>

Answer 2

You were close! Change line 7 to:

var repl = '<span class="search-found">$&</span>';

Notice the $& in there. It's a reference to the matched word and preserves the case.

http://jsfiddle.net/hh2zvjft/2/

And as Roko pointed out in the comment below, you'll get a constant padding increase of 3px on either side if you keep clicking Find. To fix this I'd recommend removing the padding from the CSS, or disabling the Find button if the words have already been highlighted.