seleccionar texto ignorando los elementos internos de la etiqueta 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>

Okay. Permítanme explicar -> el método getSelectionHTML () es para la selección de caracteres de 0 a 10. Obtengo los valores por id "myDiv". pero las etiquetas internas en negrita, cursiva y otras me están dando problemas.

En palabras simples, solo quiero hacer una selección de los primeros diez caracteres (y aplicarles la etiqueta span) que están en la etiqueta "myDiv".

¿Qué es exactamente lo que me falta?