JSFiddle - React, Tailwind, and code Playground

by Darker

HTML

<div id="myDiv">
    <span>fdsgfds ,gdfgf ,gfdgfd,gfdgfd,gfdg,fd</span>
    <input type="text" value="" placeholder="Say something" />
</div>
<button onclick="replace()">Replace commas!</button>

CSS

.highlight {
    color:red;
    font-weight: bold;
    
}

JavaScript

//Main code
window.replace = function() {
  var nodes = document.getElementById("myDiv").getTextNodes(true);
   
  for(var i=0, l=nodes.length; i<l; i++) {
      replaceLetters(nodes[i], ",");
  } 
}


//Background code
HTMLElement.prototype.getTextNodes = function(recursive, uselist) {
  var list = this.childNodes;
  var nodes = uselist!=null?uselist:[];
  for(var i=0,l=list.length; i<l;i++) {
    if(list[i].nodeType==Node.TEXT_NODE) {
      nodes.push(list[i]);
    }
    else if(recursive==true&&list[i].nodeType==1&&list[i].tagName.toLowerCase()!="script"&&list[i].tagName.toLowerCase()!="style") {
      list[i].getTextNodes(true, nodes);
    }
  }
  //console.log(nodes);
  return nodes;
}
/*Turn single text node into many spans containing single letters */
  /* @param
       textNode - HTMLTextNode element
       highlight - the character to highlight
     @return
       null
  */
  function replaceLetters(textNode, highlight) {
    //Get the string contained in the text node
    var text = textNode.data;
    //Generate a container to contain text-node data
    var container = document.createElement("span");
    //Create another span for every single letter
    var tinyNodes = [];
    //Split the letters in spans
    for(var i=0,l=text.length;i<l; i++) {
      //skip whitespace
      if(text[i].match(/^\s*$/)) {
        container.appendChild(document.createTextNode(text[i]));
      }
      //Create a span with the letter
      else {
        //Create a span
        var tiny = document.createElement("span");
        //If the letter is our character
        if(text[i]==highlight) 
          tiny.className = "highlight";
        tiny.innerHTML = text[i];
        container.appendChild(tiny);
      }
    }
    //replace text node with a span
    textNode.parentNode.insertBefore(container, textNode);
    textNode.parentNode.removeChild(textNode);
  }