JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text">Hello, <span class="name">John</span></div>

JavaScript

var text = document.getElementById("text");
    var msg = text.textContent;
    var name = document.getElementsByClassName("name")[0].textContent;
    
    // remove name from msg
    msg = msg.substring(0,msg.length - name.length);
    // to char array
    msg = msg.split('');
    name = name.split('');
    
    text.innerHTML = "<span>" + msg.join("</span><span>") + "</span>";
    text.innerHTML += "<span class=\"name\">" + name.join("</span><span class=\"name\">") + "</span>";