How to insert spans around every word where existing spans exist within each word

Given an HTML element tangled with miscellaneous internal spans, I want a function that dynamically inserts/wraps spans around every individual word within a parent element, even though existing spans 'disturb' a search using innerHTML; only a search of innerText will reveal the matches.

   // eg:    
<span id="parent">
  <span id="oldSpan1">Hardware:</span> <br> 
  the 
  <span id="child1">kicka</span>ble, 
  <span id="child2">throwa</span>ble, 
  <span id="child3">puncha</span>ble 
  components 
  of 
  a 
  <span  id="oldSpan2">computer</span>!
</span>

   // I want the result to be:
<span id="parent">
  <span id="word1"><span id="oldSpan1">Hardware:</span></span> <br> 
  <span id="word2">the</span> 
  <span id="word3"><span id="child1">kicka</span>ble</span>, 
  <span id="word4"><span id="child2">throwa</span>ble</span>, 
  <span id="word5"><span id="child3">puncha</span>ble</span> 
  <span id="word6">components</span> 
  <span id="word7">of</span> 
  <span id="word8">a</span> 
  <span id="word9"><span id="oldSpan2">computer</span></span>!
</span>    

(Please note that my actual task involves a string of non-Latin characters, so using a better regex to identify word boundaries will not help. For the purposes of this post I define a 'word' as whatever passes parent.innertext.match( wordBoundary_rx ) where wordBoundary = /\b/g. In my real task it is using the regex /[a-zA-Zɑôáīúȑìêɑ͡iɑ͡uŋġḧn̐ƞġčḣñt́d́ŕŕńȶv̈m̈ᵯǰɏæǽÿẇẏs̃śk̇ś̶g̶̃]+/gm )

The only algorithm I could think of is very complicated involving manipulating the HTML String based on parsing the innerText with a regex (unrecommended by the Pundits) and I suspect there is a much more professional way using text nodes.

function createWordSpans ( parent ){
  const wordBoundary_rx = /\b/g
  const tagSplitter_rx. = /(<.*?>|[^<]+)\s*/g
  const textString = parent.innerText
  const textArray  = textString.match( wordBoundary_rx )
  let hTMLString   = parent.innerHTML
  const hTMLArray  = hTMLString.match( tagSplitter_rx )
  for ( const word of textArray ){
    
  }
}

#child1 {
  color: green;
}

#child2 {
  color: orange;
}

#child3 {
  color: red;
}

    <span id="parent">
      <span id="oldSpan1">Hardware:</span> <br> 
      the 
      <span id="child1">kicka</span>ble, 
      <span id="child2">throwa</span>ble, 
      <span id="child3">puncha</span>ble 
      components 
      of 
      a 
      <span  id="oldSpan2">computer</span>!
    </span>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/qdnex3V