JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">Testing, testing, one, two, three.</div>

CSS

.highlight:hover {
    color: red;
    cursor: pointer;
    border-top: dotted 1px red;
    border-bottom: dotted 1px red;
}

JavaScript

var div = document.getElementById("test");

function clickify (e) {
    var arr = (typeof e.innerText !== 'undefined') ? e.innerText.split("") : e.textContent.split(""),
        max = arr.length,
        i = 0,
        template = "<span class='highlight' onclick='alert(this.innerText || this.textContent);'>$c</span>",
        result = "";
   
    for (; i < max; i += 1) {
        result += template.replace("$c", arr[i]);
    }
    
    e.innerHTML = result;
    
}

clickify(div);