美文网首页前端
关于js选中文字

关于js选中文字

作者: blossom_绽放 | 来源:发表于2019-11-04 18:33 被阅读0次
    //  获取选中的文字
    var txt =  window.getSelection() 
    alert(txt) // alert默认调用了toString()
    
    //  清除选中的文字
    window.getSelection().removeAllRanges()
    
    

    选中文本相关

    <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)
    
    image.png
    1. 设置开始截止位置选中
    //可用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)
    
    image.png
    1. 跨段选中
    // 对于其他 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)
    
    image.png
    1. 跨段文字特定位置选中
    //跨段文字特定位置选中
    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)
    
    image.png
    1. input输入框文字选中
    <input type="text"  id="text"  value="您好吗?" onfocus="getFocus()"/>
    
    <script>
    function getFocus() {
      document.getElementById("text").select()
    }
    </script>
    

    相关文章

      网友评论

        本文标题:关于js选中文字

        本文链接:https://www.haomeiwen.com/subject/ibndbctx.html