js：擷取目前滑鼠選中的文本/html

實作原理：

通過​

​window.getSelection​

​ 擷取目前選中的區域，再擷取文本，和html

完整代碼

<div id="content">
  一剪梅·詠柳
  夏完淳〔明代〕
  無限傷心夕照中，故國凄涼，剩粉餘紅。金溝禦水自西東，昨歲陳宮，今歲隋宮。
  往事思量一晌空，飛絮無情，依舊煙籠。長條短葉翠濛濛，才過西風，又過東風。
  <img src="https://www.baidu.com/img/flexible/logo/pc/[email protected]" 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>