JS怎么判断鼠标选中的内容是否包含任意标签?

前言

公司的某个需求是:

  • 鼠标可以在页面中选择任意的内容
  • 前端去校验选择的内容是否是纯文本
  • 如果是,发请求;不是,提示选择的内容不规范

最终 window.getSelection() 去实现的

代码

js 复制代码
// 1.创建一个新的文档片段来保存选区内容
const richText = window.getSelection().getRangeAt(0).cloneContents();

// 2. 创建一个 div,将选择的内容作为他的子元素
// 3. 这样通过 innerHTML 就能获取字符串
const richTextContent = document.createElement('div');
richTextContent.appendChild(richText);
// 如果选择的内容包含了标签,则 text 的可能是值是 "xx  <span>aa</span> ccc" 这样的
const text = richTextContent.innerHTML;

// 这个正则表达的是选择的内容只能是 汉字、英文、数字、常见的标点符号和空格
const eReplaceSelectedWordReg = /^[\u4e00-\u9fa5a-zA-Z0-9。?!,;:""''()【】《》<>...~.?!,;\s:''\"()]*$/

if (!eReplaceSelectedWordReg.test(text)) {
    message.warning(
      '所选内容不规范,请选择数字、中文、英文及常规标点符号内容',
    );
    return;
}
相关推荐
小码哥_常17 小时前
解锁Android嵌入式照片选择器,让你的App体验丝滑起飞
前端
郑寿昌18 小时前
IIoT本体迁移的领域扩展机制
服务器·前端·microsoft
深海鱼在掘金18 小时前
Next.js从入门到实战保姆级教程(第十一章):错误处理与加载状态
前端·typescript·next.js
深海鱼在掘金18 小时前
Next.js从入门到实战保姆级教程(第十二章):认证鉴权与中间件
前端·typescript·next.js
energy_DT18 小时前
2026年十五五油气田智能增产装备数字孪生,CIMPro孪大师赋能“流动增产工厂”三维可视化管控
前端
龙猫里的小梅啊19 小时前
CSS(四)CSS文本属性
前端·css
MXN_小南学前端19 小时前
watch详解:与computed 对比以及 Vue2 / Vue3 区别
前端·javascript·vue.js
饭小猿人19 小时前
Flutter实现底部动画弹窗有两种方式
开发语言·前端·flutter
让学习成为一种生活方式19 小时前
pbtk v 3.5.0安装与使用--生信工具084
前端·chrome
heimeiyingwang19 小时前
【架构实战】FinOps云成本优化实践
前端·chrome·架构