Going through a Variable that contains HTML to check for specific words

Question

I'm using Quill Editor, which is basically a Box like in SO where you type in text and get HTML out. I store that HTML in a variable. Now my Website has a List of Tags (certain keywords) of brands and categories.

I would like a functionality to see if a Tag is inside that HTML. For example, my Author types The new Nike Store is open now I would need the Nike to be a Tag. It can be a span with a certain class.

What is the best way to accomplish this? I want to check before publishing as live detection is not needed.

My Solution for now:

I didn´t implement it yet, but I think I would try to check every word inside my tag list before going to the next and wrapping it in the needed HTML Tags if the word is a Tag. But this could get messy to code because of all the other stuff like the other HTML Tags that get generated through the editor.

Answer 1

Assuming that the author types just plain text, you can use a regular expression to search for tag words (or phrases) and replace the phrase in the HTML with that phrase, surrounded in a span with your new class:

const input = 'The new Nike Store is open now';
const htmlStr = input.replace(/\bnike\b/gi, `<span class="tag">$&</span>`);
document.body.appendChild(document.createElement('div')).innerHTML = htmlStr;

.tag {
  background-color: yellow;
}

Or, for dynamic tags, create the pattern dynamically:

const input = 'The new Nike Store is open now';
const tags = ['nike', 'open'];
const pattern = new RegExp(tags.join('|'), 'gi');
const htmlStr = input.replace(pattern, `<span class="tag">$&</span>`);
document.body.appendChild(document.createElement('div')).innerHTML = htmlStr;

.tag {
  background-color: yellow;
}

(if the tags can contain characters with a special meaning in a regular expression, escape them first before passing to new RegExp)