JSFiddle - React, Tailwind, and code Playground

HTML

<span id="phrase">Here are <a href="#"> test</a>  some text <p> some text again </p> some woreds</span>

JavaScript

function addColor(domNode, color, letter){
    if(domNode.nodeType!=1||!domNode.hasAttribute('edited')){
		if(domNode.nodeType==3){
				var newText=document.createElement('span');    
				newText.innerHTML=domNode.textContent;
				newText.setAttribute('edited', true);
				var text = newText.innerHTML.split('').map(function(el){
				  if(el==letter){
					return '<i style=\"color:'+color+'\">'+el+'</i>';
				  }
				  else{
					return el;
				  }
			  }).join('');
			  newText.innerHTML=text;
			  domNode.parentNode.replaceChild(newText,domNode);
		}
		for(var i=0; i<domNode.childNodes.length;i++){
			addColor(domNode.childNodes[i], color, letter);
		}
	}
} 

addColor(document.getElementById('phrase'), 'red', 'e');