Estoy buscando coincidencias de expresiones regulares específicas en un texto en un div contenteditable . Encuentro las coincidencias correctas:

 <script> const regex = /my_regex/g; let content = $("#contenteditable").text(); let matches = content.match(regex); if (matches) { matches.forEach((match, groupIndex) => { // it finds the correct matches. }); } </script>

Quiero resaltar las coincidencias en el texto envolviendo cada coincidencia en un elemento <span> con algo de estilo

Al principio intenté usar content.replace(//..) y luego document.getElementById('contenteditable').textContent = content; u otros métodos que usan innerHTML , pero se dio cuenta de que simplemente vuelve a cargar todo y no permite que el usuario siga escribiendo en el div contenteditable .

Entonces, creo que la única forma de hacerlo es obtener la posición de cada coincidencia y reemplazar cada ocurrencia por sí sola.

Así que encontré esta publicación: obtenga el inicio y el final de un rango en relación con su contenedor principal

Pero incluso si tengo la posición de intercalación para cada partido, ¿cómo puedo reemplazar solo eso? ¿Hay alguna forma menos complicada de reemplazar las coincidencias "sobre la marcha" (mientras el usuario sigue escribiendo sin interrumpirlo), o tiene que hacerse de estas formas complicadas?