I'm working on a conceptual project. Text reaveal on selection with highlight.

I have to keep the text highlighted once it is selected.

<div class="reveal" id="textToSelect"> 
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
    <span class="reveal-text">Ctexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
</div>

I used execommand to create some spans with background-color on selection. It's work but execommand is now obsolete.

document.getElementById('textToSelect').addEventListener('mouseup', function() {
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
  range = sel.getRangeAt(0);
}

document.designMode = "on";
if (range) {
  sel.removeAllRanges();
  sel.addRange(range);
}

document.execCommand("hiliteColor", false, "red");

document.designMode = "off";
});

How can I create those spans without execCommand ? Is there an alternative ?

Many thanks in advance for your support !