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?