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

相关文章
|
5天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
42 10
|
2天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
11 4
|
1天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
10 0
html5+three.js公路开车小游戏源码
|
9天前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
10天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
53 6
|
25天前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
258 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
25天前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
125 0
html+css+js+jQuery学习笔记(一)
|
JavaScript 前端开发 Go
html+js+Jquery(三)
html+js+Jquery(三)
170 1
html+js+Jquery(三)