Question

<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>

确定。让我解释一下 - ＆gt; getSelectionHTML（）方法用于选择0到10之间的字符。我通过“myDiv”id获取值。但内心大胆，斜体和其他标签给我带来了麻烦。

简单来说，我只想选择“myDiv”标签中的前十个字符（并将它们应用于span标签）。

我到底错过了什么？

Answer 1

使用TextRange的IE更容易，它基于字符，单词和句子而不是节点和偏移。在非IE浏览器中，您需要在DOM中对文本节点进行繁琐的手动遍历。但是，即使您要执行此操作以获取<div>中的前十个文本字符（这将是“asdf asdfa”），您的策略也会有缺陷，因为您在innerHTML上使用了替代品，尝试找不到“asdf asdfa”（innerHTML将以“asdf作为<b> dfa”开头，或者可能“asdf as <B>”，具体视浏览器而定。< / p>

我建议使用DOM遍历查找<div>内的所有文本节点，并使用<span> s围绕所需文本节点的各个部分，从而完全避免Ranges，从而实现此目的在所有主流浏览器中工作。

Answer 2

您正试图选择例如你的文字的第1到10个字符。但是在使用Range.setStart和.endStart时，第一个参数是包含文本的文本节点。如果使用Firebug（或Web Inspector）浏览DOM，您会发现文本中的字符10位于另一个元素（<b>元素）中，并带有自己的文本节点。

顺便说一句，你遗漏了几个必需的元素/标签，也可能是错误的来源。

我的更正版本为

<!DOCTYPE html>
<html>
<head>
  <title>Title element is required</title>
<body>
<script>
function getSelectionHTML()
{
    var div = document.getElementById("myDiv");
    var bEl = document.getElementById("bEl");

    if (document.createRange) {.
        var textNode=div.firstChild;
        var rangeObj=document.createRange();
        rangeObj.setStart(textNode,0);
        rangeObj.setEnd(bEl.firstChild,2);
        alert(rangeObj.toString());
//        div.innerHTML = div.innerHTML.replace(rangeObj.toString(), '<span style="background-color: lime">'+rangeObj.toString()+'</span>');
    }
}
</script>
<div id="myDiv">
asdf as<b id="bEl">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()">
</form>
</body>
</html>

现在rangeObj包含所选文本，但您不能以您尝试的方式简单地插入<span>元素，因为元素不能以这种方式嵌套：

<span>asdf as<b>dfa</span>s df asf…

通过忽略div标签javascript的内部元素来选择文本

2 个答案: