Eu preciso cercar palavras individuais dentro de um elemento HTML com tags SPAN. Então, algo como isto:

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

Deve se tornar isso:

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

O motivo é que quero descobrir qual palavra está especificamente sob o cursor usando "document.elementFromPoint (X, Y)". Eu tentei usar um regex simples:

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

... mas isso não funcionará, pois o elemento HTML em questão definitivamente terá elementos nele. Eu usaria esse regex no innerText em vez do innerHTML, mas perderia toda a formatação existente.

Tentei percorrer os filhos do elemento, executando essa substituição de regex em cada um, mas às vezes os elementos filhos têm suas próprias tags HTML e não consigo descobrir como executar uma substituição do texto que vem antes ou depois das tags.

Alguém tem uma boa solução?