当前位置: 首页 > news >正文

[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式

获取网页选中内容的字符串格式

let selected_text_by_mouse: any// 获取选中的文字
const mouse_selected_text=(event:MouseEvent)=>{const selection = window.getSelection();if(selection && selection.rangeCount > 0){const content = selection.toString();selected_text_by_mouse = content}else{selected_text_by_mouse=""}
}

获取网页选中内容的HTML格式
(无法获取选中文字最外面的HTML标签)
例如:

<p><span>段文</span></p>

选中“一段文字”之后,得到的是:

<span>段文</span>

而不是:

<p><span>段文</span></p>
let selected_text_by_mouse: any// 获取选中的文字
const mouse_selected_text=(event:MouseEvent)=>{const selection = window.getSelection();if(selection && selection.rangeCount > 0){const range = selection.getRangeAt(0)const clonedFragment = range.cloneContents()// 创建一个临时容器以容纳克隆的片段const innerTmpContainer = document.createElement('div')innerTmpContainer.appendChild(clonedFragment)const contentHtmlString = innerTmpContainer.innerHTML// 清除临时容器(可选)innerTmpContainer.remove()const content = contentHtmlStringselected_text_by_mouse = content}else{selected_text_by_mouse=""}
}
http://www.lryc.cn/news/395615.html

相关文章:

  • 线程安全的原因及解决方法
  • 微信零钱明细删除了还能恢复吗?图文教程解析
  • mp4视频太大怎么压缩不影响画质,mp4文件太大怎么变小且清晰度高
  • 【线程同步-2】
  • 【别再为可视化工具付费了!】财务报表免费制作软件,这款免费可视化工具的功能超乎想象
  • 【HTML入门】第五课 - 加粗和倾斜的字体们
  • 解决树形表格 第一列中文字没有对齐
  • 三级_网络技术_09_IP地址规划技术
  • 力扣1878.矩阵中最大的三个菱形和
  • ELB和VPC是云计算领域中的两个术语,通常与Amazon Web Services (AWS)相关联
  • YOLO-World实时开集检测论文阅读
  • LLM - 词向量 Word2vec
  • Tileserver GL中glyphs的使用
  • uniapp自动升级
  • java Pair怎么使用
  • 数据库doris中的tablet底层解析
  • 江苏高防服务器都有哪些优势?
  • Pytest单元测试系列[v1.0.0][Pytest基础]
  • C/C++服务器基础(网络、协议、数据库)
  • Mysql系列-Binlog主从同步
  • java设计模式(六)——原型模式
  • arm (exti中断)
  • 触摸屏虚拟键盘组件 jQuery Virtual Keyboard使用 自定义键盘
  • 面试题07-09
  • MySQL之binlog日志
  • 【大数据】什么是数据湖?一文揭示数据湖的本质
  • CSS【详解】文本相关样式(含 font 系列,文本排版,文本装饰,分散对齐,渐变色文本等)
  • 加油卡APP系统开发,优惠加油收益
  • el-scrollbar实现自动滚动到底部(AI聊天)
  • 开源去除背景的项目:rembg 安装和部署