Necesito rodear palabras individuales dentro de un elemento HTML con etiquetas SPAN. Entonces algo como esto:

Foo <span class="f1 b0">bar <b>baz</b> boo blah</span> lorem ipsum

Debería convertirse en esto:

<span>Foo</span> <span class="f1 b0"><span>bar</span> <b><span>baz</span></b>
<span>blah</span></span> <span>lorem</span> <span>ipsum</span>

La razón es que quiero poder averiguar qué palabra, específicamente está debajo del cursor usando "document.elementFromPoint (X, Y)". Intenté usar una expresión regular simple:

theElement.innerHTML.replace(/\b(\w+)\b/g, "<span>$1</span>")

... pero eso no funcionará ya que el elemento HTML en cuestión definitivamente tendrá elementos dentro de él. Simplemente usaría esa expresión regular en innerText en lugar de innerHTML pero luego perdería todo el formato existente.

He intentado guiar a los elementos secundarios del elemento, realizando ese reemplazo de expresiones regulares en cada uno, pero a veces los elementos secundarios tienen sus propias etiquetas HTML dentro y no puedo entender cómo realizar un reemplazo del texto que viene antes o después de las etiquetas. @

¿Alguien tiene una buena solución?