Recombine broken-up text in paragraph and replace

The first lines of JavaScript simply make reference to my pseudo-iframe and the search text box. Working through each para within iframe, flatten the para (remove sub-elements); place a formatting span around the search text; update para in iframe with processed version

HTML

<div id="myFrame"> <!-- pretend this is your iframe -->
    <p><span>wo</span><span>rd</span></p>
    <p><span><i>anoth</i></span><span>er sen</span><span>tence</span></p>
</div>
<div>
    <input id="findText" type="text" placeholder="Enter text to be found..."/>
    <button onclick="doIt()">Search</button>
</div>

CSS

div#myFrame { border: 1px solid Black; }
span.HL { background-color: Yellow; }

JavaScript

function doIt() {
    var $frame = $("#myFrame");
    var sText = $("#findText").val().trim();

    $("p span", $frame).each(function() {
      var count=0;
        alert("chamou")
            var th=$(this);
        var next;
               
                    var rep=th.text().substr(0,sText.length);
                    next=$(this).next(); 
alert("th "+th.text()+" rep "+rep)                    
                    var len = th.text().length;
                    var rest = sText.substr(len);
                   if (next.text().search(rest) > 0) 
                        break;

                    var newText = "<span class='HL'>" + rep + "</span>";
                var     paraText = th.text().replace(rep, newText);

                th.html(paraText);
                    sText = rest;
                    th=th.next();
 

    });
}