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;
}
相关推荐
问道飞鱼44 分钟前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴1 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish2 小时前
react学习记录(三)
javascript·学习·react.js
小疙瘩2 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git2 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕2 小时前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北2 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript
全栈前端老曹2 小时前
【Redis】Redis 持久化机制 RDB 与 AOF
前端·javascript·数据库·redis·缓存·node.js·全栈
NEXT062 小时前
受控与非受控组件
前端·javascript·react.js
NEXT063 小时前
防抖(Debounce)与节流(Throttle)解析
前端·javascript·面试