前端处理过滤,特殊字符以及输入法特殊表情符号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

相关推荐
paopaokaka_luck几秒前
基于springboot3+vue3的文山民族文化资源展示与推广平台(协同过滤算法、Echarts 图形化分析)
java·前端·spring boot·学习·echarts
临江仙4553 分钟前
同一个 AI Agent 如何同时服务 Web、微信和 QQ:PureChat 的渠道架构实践
前端·人工智能·后端
程序员鱼皮6 分钟前
16 个超火的 DeepSeek Harness 插件,大肥鱼已经落后 N 个版本了。。。
前端·后端·ai编程
马可家的菠萝11 分钟前
AI Agent Demo 10 分钟就能跑,真正难的是让它 200 个场景都别乱来
前端·后端·aigc
Vuji20 分钟前
Pi 插件解剖|summarize.ts:199 行,给 Agent 的对话做一份 Markdown 总结
前端·人工智能·agent
逻辑帧25 分钟前
给 AI 时代找工作的同学一些实用建议
前端·后端
蜡台43 分钟前
Jetpack Compose 从入门到精通
android·前端·kotlin·compose·jepack
学习星球1 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈
软件开发JR2 小时前
基于Web的足球青训俱乐部管理后台系统的设计与开发
java·前端·spring boot·毕业设计
那年窗外下的雪.2 小时前
VXLAN EVPN 分层排障:从 VTEP 可达、ARP/MAC 到 MAC Mobility
服务器·前端·网络·数据库·spine