JSFiddle - React, Tailwind, and code Playground

HTML

<p class="one">oneoneone</p>
<p class="one">two two two</p>
<p class="one">asasdsadasdasd</p>

CSS

span {
    color:red
}

JavaScript

var startNode = document.getElementsByClassName("one");
Array.prototype.forEach.call(startNode, function (element) {
    var range = document.createRange();
    var span = document.createElement("span");
    range.setStart(element, 0);
    range.setEnd(element, 1);
    range.surroundContents(span);
})