javascript里文字选中/选中文字

一、获取/清除选中的文字

    //获取选中的文字
    document.getElementById("get").onclick = function () {
        var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        alert(txt);//alert默认调用了toString()
    }

 

    //清除选中的文字
    document.getElementById("set").onclick = function () {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }

二、设置文字选中效果

 

<body>
<p>这是一段默认被选中的文本</p>
<p>这是一段默认有开始截止位置的文本</p>
<div>
    <span>太阳当空照,<br></span>
    <span>花儿对我笑。<br></span>
    <span>小鸟说:“早,早,早,<br></span>
    <span>你为什么背上小书包?”<br></span>
    <span>我去上学校,<br></span>
    <span>天天不迟到。<br></span>
    <span>爱学习,爱劳动,<br></span>
    <span>长大要为祖国立功劳。<br></span>
</div>
</body>

1、全部选中

    //选中一段文字
    var range = document.createRange();
    referenceNode = document.getElementsByTagName("p").item(0);
    range.selectNodeContents(referenceNode);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range) 

 实现效果:

 

2、设置开始截止位置选中

    //分段式选中,可用nodeType判断
    //如果起始节点类型是 Text, Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。
    var range2 = document.createRange();
    var startNode = document.getElementsByTagName("p").item(1).firstChild;
    var startOffset = 1;
    range2.setStart(startNode, startOffset);
    var endOffset = 7;
    range2.setEnd(startNode, endOffset);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)

 实现效果:

 

跨段选中:

    //分段式选中2
    // 对于其他 Node 类型节点, startOffset 是指从起始结点开始算起子节点的偏移量。
    var range2 = document.createRange();
    var startNode = document.getElementsByTagName("div").item(0);
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    var startOffset = 3;
    range2.setStart(startNode, startOffset);
    var endOffset = startNode.childNodes.length - 2;
    range2.setEnd(startNode, endOffset);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)

 实现效果:

 

 

3、跨段文字特定位置选中

    //分段式选中3
    //跨段文字特定位置选中
    var range2 = document.createRange();
    var startNode = document.getElementsByTagName("div").item(0);
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    range2.setStart(startNode.childNodes[5].firstChild, 2);
    range2.setEnd(startNode.childNodes[7].firstChild, 8);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)

实现效果:

 

转载于:https://www.cnblogs.com/sanqianjin/p/9259033.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值