js实现获取鼠标拖动的选中的内容

在前端开发的时候有时候会遇到一种需求：在一段文本中获取选中的一段文字。
如下：怎么获取选择的文字呢？

例子

getSelection()方法

window对象有一个getSelection()方法，他会返回一个Selection对象。从这个对象中储存了拖动鼠标选择文本的一些信息。
比如：用户选择的文本范围插入符号的位置等。
举个例子：

    
        
        
    
    
        
getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置。
    
    

上面的代码是：鼠标拖动选中一段文字，释放鼠标后会在控制台把选中的文字输出。其实也可以不显示的调用用toString()方法。直接写console.log(selection+“”)。这样得到的效果是一样的。

跨元素选中文本，怎么获取多段字符呢？

可能有时候要选中的文本不在一个标签内，可能会跨多个标签。
比如下面的html代码，下面的文字在两个标签里。如果我选择一段跨标签的文字，然后我想把他转换成一个字符数组，把每个元素中的字符放到一个数组里怎么弄？

        
getSelection()方法可以返回一个Selection对象，
        
用于表示用户选择的文本范围或插入符的当前位置。
 

这个时候如果直接使用selection.toString()获取的是一段包含换行字符"\n"的字符。
比如：

跨元素选中一段文本

控制台输出：

控制台输出结果

输出的是一段含有换行符号的字符串，可以使用split()方法转换成字符数组。

selection.toString().split("\n");
//返回的就是个字符串数组。

Range对象获取选中的标签

上面的例子，是把每个标签里面的字符分到一个字符串数组里面了。但是如果想要获取选中的文本分别在哪些标签里面呢？
这时候可以使用Selecton对象的getRangeAt(0)这个方法，获取一个Range对象。
Range对象的api请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Range