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;
}
相关推荐
你真的可爱呀1 小时前
uniapp+vue3项目中的常见报错情况以及解决方法
前端·vue.js·uni-app
差点GDP5 小时前
模拟请求测试 Fake Rest API Test
前端·网络·json
酒尘&6 小时前
Hook学习-上篇
前端·学习·react.js·前端框架·react
houyhea6 小时前
从香港竹脚手架到前端脚手架:那些"借来"的发展智慧与安全警示
前端
哈哈~haha7 小时前
Step 14: Custom CSS and Theme Colors 自定义CSS类
前端·css·ui5
Ndmzi7 小时前
Matlab编程技巧:自定义Simulink菜单(理解补充)
前端·javascript·python
勇气要爆发7 小时前
物种起源—JavaScript原型链详解
开发语言·javascript·原型模式
我命由我123457 小时前
VSCode - VSCode 修改文件树缩进
前端·ide·vscode·前端框架·编辑器·html·js
SoaringHeart8 小时前
Flutter组件封装:验证码倒计时按钮 TimerButton
前端·flutter
San30.8 小时前
深入理解 JavaScript OOP:从一个「就地编辑组件」看清封装、状态与原型链
开发语言·前端·javascript·ecmascript