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

2019-07-01 02:22:20 阅读：258 来源： 互联网

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

好.让我解释一下 – > getSelectionHTML()方法用于选择0到10之间的字符.我通过“myDiv”id获取值.但内心大胆,斜体和其他标签给我带来麻烦.

简单来说,我只想选择“myDiv”标签中的前十个字符(并将它们应用于span标签).

究竟我错过了什么？

解决方法:

你试图选择例如你的文字的第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…

标签：javascript,dhtml,safari,html
来源： https://codeday.me/bug/20190701/1342595.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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