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

相关推荐
king王一帅11 小时前
AI 时代真正流式解析+渲染双重优化的 Incremark
前端·ai编程·markdown
aesthetician11 小时前
用铜钟听歌,发 SCI !
前端·人工智能·音频
Mike_jia12 小时前
LogWhisperer 全解析:打造你的Linux服务器AI日志分析中枢
前端
网安Ruler12 小时前
崭新出厂,自研CipherForge小工具,攻破 D-Link M30 固件加密
前端·网络·python
daxiang1209220512 小时前
记一次前端请求报错:Content-Length can‘t be present with Transfer-Encoding,+Cursor使用教训
前端·cursor
武清伯MVP12 小时前
深入了解Canvas:HTML5时代的绘图利器(二)
前端·html5·canvas
float_六七12 小时前
Spring AOP表达式速查手册
前端·javascript·spring
PineappleCoder12 小时前
没 CDN = 用户等半天?四大核心机制:就近、分流、提速、容错全搞定
前端·性能优化
suoyue_zhan12 小时前
GBase 8s V8.8 安装部署实践指南
前端·数据库·chrome
LisEcho12 小时前
yoyoj-rn — RN 的脚手架工具可以不是 @react-native-community/cli
前端·react native·npm