您当前的位置: 首页 >  html

彭世瑜

暂无认证

  • 3浏览

    0关注

    2791博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

彭世瑜 发布时间:2022-06-19 16:37:00 ,浏览量:3

实现原理:

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

完整代码


  一剪梅·咏柳
  夏完淳〔明代〕
  无限伤心夕照中,故国凄凉,剩粉余红。金沟御水自西东,昨岁陈宫,今岁隋宫。
  往事思量一晌空,飞絮无情,依旧烟笼。长条短叶翠濛濛,才过西风,又过东风。
  




  /**
   * 获取当前选中的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());
  })

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

关注
打赏
1665367115
查看更多评论
立即登录/注册

微信扫码登录

0.0701s