Estoy trabajando en un proyecto conceptual. Revelación de texto en la selección con resaltado.

Tengo que mantener el texto resaltado una vez seleccionado.

 <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>

Usé execommand para crear algunos intervalos con color de fondo en la selección. Es trabajo pero excommand ahora está obsoleto.

 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"; });

¿Cómo puedo crear esos intervalos sin execCommand? ¿Hay alguna alternativa?

¡Muchas gracias de antemano por su apoyo!