selecionando texto ignorando elementos internos da tag div 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>

Está bem. Deixe-me explicar -> O método getSelectionHTML () destina-se à seleção de caracteres de 0 a 10. Estou obtendo os valores pelo ID "myDiv". mas as tags negrito, itálico e outras internas estão me causando problemas.

Em palavras simples, eu só quero fazer a seleção dos dez primeiros caracteres (e aplicá-los na tag span) que estão na tag "myDiv".

O que exatamente estou perdendo?

questionAnswers(2)

yourAnswerToTheQuestion