RegEx-exact word match but case insensitive

Question

Can you tell me how to get the exact word match but case insensitive? I have tried this. But it is not working. Any clue, please?

forEach(keywordsClone, (k) => {

 const regExpression = new RegExp('^' + `${k}` + '$', 'i'); //exact match and case insensitive
    
 transcript = transcript.replace(regExpression, '<span class="color-dark-red">$1</span>');
      });

eg let's say keywordsClone has Fire and transcript has fire . then it should be picked. ie true If keywordsClone has Fire and transcript has firee then it should be false.

This is working fine. But it doesn't pick the exact word matching.

const regExpression = new RegExp(`(${k})`, 'ig');

Update

keywordsClone=['nothing showing', 'nothing show']

transcript

"He's gonna be on scene single story residence, nothing showing you have to investigate, mm hmm."

When I used

    forEach(keywordsClone, (k) => {
   const regExpression = new RegExp(`(${k})`, 'ig'); //exact match and case insensitive
    
   transcript = transcript.replace(regExpression, '<span class="color-dark-red">$&</span>');
      });

Then it breakes like so:

    "He's gonna be on scene single story residence, <span class="color-dark-
red"><span class="color-dark-red">nothing show</span>ing</span> you have to 
investigate, mm hmm."

But I need like so only:

     "He's gonna be on scene single story residence, <span class="color-
dark-red">nothing showing</span> you have to 
    investigate, mm hmm."

I use Lodash forEach: https://lodash.com/docs/4.17.15#forEach

Answer 1

I will be using a word boundary ( \b ) to match your thing. Also, I'm using vanillaJS, and a reduce instead of forEach , but that part should be easy to adjust to your lodash version.

The key thing about a word boundary is that it will match whitespace (space, newline, etc) but not characters like < and > - which is what the previous pass will match. So this simple version works.

If you wanted to do some other replacement (such as that, say, your newly created inner span still contains whitespace), you could adjust regex to match the thing, only if it is not within something like the "span dark color red" thing. But that is another question.

 const getText = () => document.querySelector('#my-text').innerHTML; const wordMatches = ['nothing showing', 'nothing show']; const createReplacement = (snippet, regex) => { // snippet here is something that's not within a span already, but matching your thing const re = new RegExp(`\\b${regex}\\b`) return snippet.replace(re, '<span class="color-dark-red">$&</span>') } const app = () => { const text = getText(); const replacement = wordMatches.reduce( (snippet, word) => createReplacement(snippet, word), // in each loop, run this and pass result to next word text); // this is the initial snippet document.querySelector('#replacements').innerHTML = replacement; } app();

 #replacements.color-dark-red { color: tomato; }

 <span id="my-text">"He's gonna be on scene single story residence, nothing showing you have to investigate, mm hmm."</span> <div id="replacements"> </div>

Answer 2

Try like below. It should work. I guess k is a string.

const regExpression = new RegExp(k, 'ig');