js获取鼠标选中的文字

末蓝、 2021-06-26 16:06 530阅读 0赞

定义需要获取的内容的节点：

<span onClick="SelectText()">河中鱼类离奇死亡，下游居民频染怪病，
    沿岸植物不断变异，是残留农药？还是生化攻击？》</span>

获取选中的文字，我们使用`window.getSelection().toString()`方法。  
代码如下：

**JS获取鼠标选中的值**

if (window.getSelection)
            { //一般浏览器 
                userSelection = window.getSelection();
            }
            else if (document.selection)
            { //IE浏览器、Opera 
                userSelection = document.selection.createRange();
            } userSelection.toString();

![在这里插入图片描述][20190720113136132.png]

## js获取div中鼠标选中的文本内容 ##

<!DOCTYPE html>
    <html lang="en">
    <head></head>
    <body>
    <div><p onmouseup="mytest()">只是一段文本其余的还有很多的文字</p></div>
    <script> function mytest(e){ console.log(window.getSelection); var txt = window.getSelection?window.getSelection():document.selection.createRange().text; if(txt==""){ //当选中内容为空时，阻止事件发生 window.event? window.event.cancelBubble = true : e.stopPropagation(); }else{ var txt1=String.toString(txt);//得到的选中的文本是一个对象，需要转化为字符串 alert(txt1); } } </script>
    </body>
    </html>

## js获取鼠标选中的文字 ##

**1、获取选中的文字：**

`document.selection.createRange().text;` IE9以下使用

`window.getSelection().toString();` 其他浏览器使用

$('p').mouseup(function(){ 
        var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
        alert(txt) ;
    })

**2、取消处于选中状态的文字：**  
`document.selection.empty();` IE9以下使用

`window.getSelection().removeAllRanges();` 其他浏览器使用

$('p').mouseup(function(){ 
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    })

上述方法不仅对`div`或`p`标签中的文本有效（会自动忽略选中的‘图片’），在`ie`和`chrome`中对`input`中的文本也有效，但在`firefox`中无效，jquery的`.select()`事件（仅对`input`有效）或`js`的`onselect`事件（仅对`input`有效）和js的`.select()`（使`input`中的文本内容处于选中状态）方法在三个浏览器中都有效。

**3、使某**Dom**中的文字处于选中状态：**

$('.somedom').click(function(){ 
        /* not ok for firefox var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges();; selection.addRange(range);*/
        this.focus();    
        if(window.getSelection){ 
            var range=document.createRange();
            range.selectNodeContents(this);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range)            
            }
        else if(document.selection){ 
            //for ie
            var range=document.body.createTextRange()
            range.moveToElementText(this)
            range.select();
        }

[20190720113136132.png]: /images/20210626/84d7cc61bf5d4450b432d0f32a57cc39.png