[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)// 现在outerTmpContainer不再包含最外层的div,而是直接包含了div的内容const contentHtmlString = innerTmpContainer.innerHTML// 清除临时容器(可选)innerTmpContainer.remove()const content = contentHtmlStringselected_text_by_mouse = content}else{selected_text_by_mouse=""}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/868687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++继承(一文说懂)

目录 一&#xff1a; &#x1f525;继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1 定义格式1.2.2 继承关系和访问限定符1.2.3 继承基类成员访问方式的变化 二&#xff1a;&#x1f525;基类和派生类对象赋值转换三&#xff1a;&#x1f525;继承中的作用域四&#xff1a;&a…

DHCP与TCP的简单解析

目录 一、DHCP 1.1 DHCP概述 1.2 DHCP的优势 1.3 DHCP的模式与分配方式***** 1.3.1 DHCP的模式&#xff1a;C/S模式&#xff08;客户机与服务器模式&#xff09; 1.3.2 DHCP的分配方式 1.4 DHCP的租约过程及原理 1.4.1 DHCP的工作原理***** 1.4.2 更新租约原理***** …

高考志愿怎么选专业,哪些是热门专业?

选专业看上去非常简单&#xff0c;但是真正做起来的时候确实不容易&#xff0c;因为对于很多结束高考的学生来说&#xff0c;选专业就意味着他们选择自己的未来&#xff0c;这可是直接关系到未来的学习和职业发展&#xff0c;关系到将来的就业方向&#xff0c;再加上现在的社会…

【ROS2】中级-编写可组合节点 (C++)

目录 起点 代码更新 添加包依赖 类定义没有主方法 CMake 变更 运行您的节点 起点 我们假设你有一个常规的 rclcpp::Node 可执行文件&#xff0c;你希望在与其他节点相同的进程中运行它&#xff0c;以实现更高效的通信。 我们将从一个直接继承自 Node 的类开始&#xff0c;并且定…

Socket网络通信流程

目录 创建Socket 绑定和监听(服务器端) 建立连接 数据传输 关闭连接 Socket不是一种协议,是对TCP/UDP等协议进行封装后供程序调用的接口,代码中调用相应的接口,即可将数据发送给对方,这种编程方式叫做socket编程。客户端建立一个socket,服务端建立一个socket,二者…

ELB和VPC是云计算领域中的两个术语,通常与Amazon Web Services (AWS)相关联

ELB 和 VPC 是云计算领域中的两个术语&#xff0c;通常与亚马逊云服务&#xff08;AWS&#xff09;相关&#xff1a; 1. **ELB (Elastic Load Balancer)**&#xff1a; - 这是AWS提供的一种服务&#xff0c;用于自动分配进入应用程序的流量&#xff0c;以实现高可用性和容错…

近红外光谱脑功能成像(fNIRS):2.实验设计、指标计算与多重比较

一、实验设计的策略与方法 近红外光谱成像&#xff08;INIRS&#xff09;作为一种非侵入性脑功能成像技术&#xff0c;为研究大脑活动提供了一种高效、生态效度高的方法。然而&#xff0c;为了充分利用INIRS技术并确保实验结果的准确性和可靠性&#xff0c;研究者必须精心设计实…

基于stm32开发的红外循迹小车

本项目算是接触32来开发的第一个小项目了&#xff0c;虽然前期用51写过一个循迹小车&#xff0c;以为直接转到32会比较简单&#xff0c;结果还是花了大几天才把小车的参数完全调完&#xff0c;以此来记录下自己的学习历程&#xff08;注&#xff1a;循迹算法并未加入PID算法&am…

spring boot集成easypoi导出word换行处理

项目场景&#xff1a; spring boot集成easypoi导出word <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version> </dependency> 问题描述 spring boo…

基于深度学习的RGB图像和IMU的数据融合

基于深度学习的RGB图像和IMU数据融合是一种结合视觉信息和惯性测量单元&#xff08;IMU&#xff09;数据以提升系统性能的方法。这种技术在机器人导航、无人机飞行控制、增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;等应用中具有重要意义。以下是关…

Spring AOP 通知的执行顺序

1. 结论 官方文档&#xff1a;Spring AOP Advice 故各种通知的执行顺序&#xff1a; Spring版本5.2.7以后&#xff1a; Around环绕通知前置操作Before前置通知目标方法After后置通知AfterReturnin返回通知或AfterThrowing异常通知Around环绕通知后置操作 Spring版本5.2.7一千…

最新的 DL/T645 调试工具,工程师必备

分享一个好用的 DL/T645 调试工具&#xff0c;下载地址&#xff1a;https://www.redisant.cn/dl645master 文章目录 最新的 DL/T645 调试工具&#xff0c;工程师必备主要功能软件截图 最新的 DL/T645 调试工具&#xff0c;工程师必备 DL/T645 是中国电力行业的一个通信协议标准…

Day47:LeedCode1143.最长公共子序列 1035.不相交的线 53. 最大子序和 392.判断子序列

1143. 最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字…

解决uni-app中全局设置页面背景颜色只有部分显示颜色的问题

在页面的style标签设置了背景色但是只显示一部分 <style lang"scss"> .content{background-color: #f7f7f7;height: 100vh; } </style>我们在app.vue里设置就行了 注意一定要是**page{}** <style>/*每个页面公共css */page{background-color: #…

淘宝商品评论电商API接口:提升销量与用户评论的策略

一、API接口简介 淘宝商品评论电商API接口是淘宝开放平台提供的一项服务&#xff0c;联讯数据通过这个接口&#xff0c;商家可以获取关于自己商品的评论数据&#xff0c;包括评论内容、评分、买家等级等信息。这些数据可以帮助商家更好地了解消费者需求&#xff0c;优化商品和服…

724.力扣每日一题7/8 Java

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 主要基于数组的…

linux主机离线安装python3环境

一、下载好python版本 Index of /ftp/python/https://www.python.org/ftp/python/ 二、创建文件夹 mkdir /home/python/ 三、上传到主机 四、解压 # 解压xz得到tar包 xz -d Python-3.9.8.tar.xz # 解压tar包 tar -xvf Python-3.9.8.tar 五、指定安装路径 # 进入解压后的…

Java:StringJoiner 类

文章目录 一、概念二、StringJoiner 类 一、概念 StringJoiner 跟 StringBuilder一样&#xff0c;创建之后里面的内容是可变的&#xff0c;它可以非常高效的进行字符串拼接&#xff0c;代码编写简洁。 二、StringJoiner 类 import java.util.StringJoiner;public class Test …

【Python_GUI】tkinter常用组件——文本类组件

文本时窗口中必不可少的一部分&#xff0c;tkinter模块中&#xff0c;有3种常用的文本类组件&#xff0c;通过这3种组件&#xff0c;可以在窗口中显示以及输入单行文本、多行文本、图片等。 Label标签组件 Label组件的基本使用 Label组件是窗口中比较常用的组件&#xff0c;…

【LeetCode】有效的数独

目录 一、题目二、解法 一、题目 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&…