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

简介: 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>

javascript获取选中的文本/html

相关文章
|
12天前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
58 11
|
18天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
59 2
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
142 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
48 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
61 0
html5+three.js公路开车小游戏源码
|
Web App开发
HTML学习2---body常用属性以及文本修饰标记
上节 ,我们了解了网站制作相关的基础知识,也了解了制作网站需要用到的语言,以及一些简单的HTML的基础知识学习笔记: 博文链接如下:http://blog.csdn.net/morixinguan/article/details/76457441 这节,来写一下body常用属性以及文本修饰标记 的常用属性(1)bgColor : 网页的背景色。
1503 0
|
28天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
56 7