Auswahl von Text durch Ignorieren der inneren Elemente des div-Tags javascript

<html>
<body>
<script language="javascript">
function getSelectionHTML()
{
    var div = document.getElementById("myDiv");

    if (document.createRange) { 
        var textNode=div.firstChild;
        var rangeObj=document.createRange();
        rangeObj.setStart(textNode,0);
        rangeObj.setEnd(textNode,5);
        div .innerHTML = div .innerHTML.replace(rangeObj.toString(), '<span style="background-color: lime">'+rangeObj.toString()+'</span>')
    }
}
</script>
<div id="myDiv">
asdf as<b>dfas df asf asdf sdfjk  dvh a sjkh jhcdjkv</b> iof scjahjkv ahsjv hdjk biud fcsvjksdhf k

</div>
<form name="aform">
<input type="button" value="Get selection" onclick="getSelectionHTML()">
</body>
</html>

In Ordnung. Lassen Sie mich erklären -> Die Methode getSelectionHTML () dient zur Auswahl von Zeichen zwischen 0 und 10. Ich erhalte die Werte über die ID "myDiv". Aber innere fett, kursiv und andere Tags bereiten mir Probleme.

In einfachen Worten, ich möchte nur die ersten zehn Zeichen auswählen (und sie mit einem Span-Tag versehen), die sich im "myDiv" -Tag befinden.

Was genau fehlt mir?