JSFiddle - React, Tailwind, and code Playground
HTML
<div id="example">This text contains a keyword to highlight</div>
JavaScript
var div = document.getElementById("example");
var textNode = div.firstChild;
var keyword = "keyword";
var keywordIndex = textNode.data.indexOf(keyword);
if (keywordIndex > -1) {
// First, split at the start of the keyword
var keywordTextNode = textNode.splitText(keywordIndex);
// Now split off the section after the keyword
var textNodeAfterKeyword = keywordTextNode.splitText(keyword.length);
// We now have three text nodes containing the text before the keyword,
// the keyword itself and the text after the keyword.
// Create the highlight element and put the keyword text node inside it
var highlightEl = document.createElement("em");
highlightEl.appendChild(keywordTextNode);
// Insert the highlight element and we're done
div.insertBefore(highlightEl, textNodeAfterKeyword);
}