前端处理过滤,特殊字符以及输入法特殊表情符号emoji的正则方法

问题描述

输入法输入表情或特殊符号,存入数据库时,会发现有报错,因为UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去。

解决方法

前端处理方法

思路使用正则匹配特殊符号或表情进行过滤,如下(根据自己的需求调整):

javascript 复制代码
// 使用正则检查输入值是否包含表情符号  
			checkEmoji(inputValue){
				const emojiPattern = /[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;  
				const hasEmoji = emojiPattern.test(inputValue);  
				console.log('是否包含表情符号',hasEmoji);
			},
			// 过滤特殊符号
			checkSymbol(inputValue){
				console.log('前端过滤特殊符号');
				const specialSymbol = /[`~!@#$%^&*()+=|{}':;',/\/\[\].<>/?~!@#¥%......&*()------+|{}【】';:""'。,、?]/ 
				const hasSymbol = specialSymbol.test(inputValue)
				console.log('是否包含特殊符号',hasSymbol);
			}
后端处理方法

后端存入数据库的时候,将Mysql的编码从utf8转换成utf8mb4

相关推荐
light blue bird8 分钟前
支组汇总主子节点工序路径图表
前端·jvm·.net·桌面端·gdi绘图
小KK_27 分钟前
新手必看篇——JS类型判断
前端·javascript
小小高不懂写代码34 分钟前
Vibe Coding时代的自我鞭策
前端·人工智能
喵个咪40 分钟前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·vue.js·nuxt.js
AI科技星42 分钟前
万有引力G与真空介电常数ε0全维度完整关系式汇编(基于v=c螺旋时空理论)
c语言·开发语言·前端·javascript·网络·汇编·electron
喵个咪1 小时前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·react.js·next.js
阿白同学1054511 小时前
一座前端文明的地层:React 源码考古报告
前端
七牛云行业应用1 小时前
别手搓多Agent了!Codex Windows版用Git Worktree并行跑代码,真的香
前端
前端环境观察室1 小时前
指纹浏览器都用了,为什么任务还是要人盯着?
前端
lichenyang4531 小时前
鸿蒙聊天 Demo 练习 11:路由拦截器 + dialog 路由 + 页面生命周期
前端