js：获取当前鼠标选中的文本/html

实现原理：

通过window.getSelection 获取当前选中的区域，再获取文本，和html

完整代码

<div id="content">
  一剪梅·咏柳
  夏完淳〔明代〕
  无限伤心夕照中，故国凄凉，剩粉余红。金沟御水自西东，昨岁陈宫，今岁隋宫。
  往事思量一晌空，飞絮无情，依旧烟笼。长条短叶翠濛濛，才过西风，又过东风。
  <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="" srcset="">
</div>

<script>

  /**
   * 获取当前选中的text/html
   * */
  function getCurrentSelect(){

    let selectionObj = null, rangeObj = null;
    let selectedText = "", selectedHtml = "";

    // 处理兼容性
    if(window.getSelection){
      // 现代浏览器
      // 获取text
      selectionObj = window.getSelection();
      selectedText = selectionObj.toString();

      //  获取html
      rangeObj = selectionObj.getRangeAt(0);
      var docFragment = rangeObj.cloneContents();
      var tempDiv = document.createElement("div");
      tempDiv.appendChild(docFragment);
      selectedHtml = tempDiv.innerHTML;
    } else if(document.selection){
        // 非主流浏览器IE
        selectionObj = document.selection;
        rangeObj = selectionObj.createRange();
        selectedText = rangeObj.text;
        selectedHtml = rangeObj.htmlText;
    }

    return {
        text: selectedText,
        html: selectedHtml
    }
  };

  // 监听内容区域鼠标抬起事件
  document.querySelector('#content').addEventListener('mouseup', function(){
    console.log('onmouseup');
    console.log(getCurrentSelect());
  })
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
 

参考
javascript获取选中的文本/html

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125359340