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;
}
相关推荐
Emma_Maria3 小时前
本地项目html和jquery,访问地址报跨域解决
前端·html·jquery
奋斗吧程序媛3 小时前
常用且好用的命令
前端·编辑器
2301_796512523 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Lazyload 懒加载(懒加载的图片)
前端·javascript·react native·react.js·ecmascript·harmonyos
敲敲了个代码3 小时前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
摘星编程3 小时前
OpenHarmony环境下React Native:Timeline时间轴组件
javascript·react native·react.js
摘星编程3 小时前
在OpenHarmony上用React Native:Timeline水平时间轴
javascript·react native·react.js
Yff_world3 小时前
网络安全与 Web 基础笔记
前端·笔记·web安全
Sapphire~3 小时前
Vue3-19 hooks 前端数据和方法的封装
前端·vue3
浩宇软件开发3 小时前
基于OpenHarmony鸿蒙开发医院预约挂号系统(前端后端分离)
前端·华为·harmonyos
嘿是我呀4 小时前
【用npm安装node时报错“npm 无法加载文件”】
前端·npm·node.js