JSFiddle - React, Tailwind, and code Playground

HTML

<p>Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, but in ourselves, that we are underlings.</p>
<p><b>William Shakespeare</b>, <em>Julius Caesar</em> (Act I, Scene II)</p>

JavaScript

var counter = 0;

function highlightText(nodeList, what) {
	
	// traverse all the children nodes
	for (var x = 0; x < nodeList.length; x++) {
	
		// text node, search directly
		if (nodeList[x].nodeType == 3) {
		
			// if it contains the text that you are looking for, proceed with the replacement
			if (nodeList[x].textContent.indexOf(what) >= 0) {
				
				// your code (mostly :P)
				var ID = "result" + counter;
				var replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';
				var textBlock = nodeList[x].textContent;
				var searchIndex = nodeList[x].textContent.indexOf(what);		
					console.log(searchIndex);
				while(searchIndex >= 0)
				{
					console.log(searchIndex);
					++counter;
					ID = "result" + counter;
					replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';			
					textBlock = textBlock.substring(0, searchIndex) + replacement + textBlock.substring(searchIndex + what.length, textBlock.length);
					searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), (searchIndex + replacement.length));
				}
				
				// create a new element with the replacement text
				var replacementNode = document.createElement("span");
				replacementNode.innerHTML = textBlock;
				
				// replace the old node with the new one
				var parentN = nodeList[x].parentNode;
				parentN.replaceChild(replacementNode, parentN.childNodes[x]);
				
			}
		} else {
			// element node --> search in its children nodes
			highlightText(nodeList[x].childNodes, what);
		}
	}
}

var nodes = document.body.childNodes;
console.log(nodes);
highlightText(nodes, "ar");