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

相关推荐
鹿野素材屋7 分钟前
技术闲聊:为什么网游会在固定时间点,刷出固定的道具?
前端·网络·unity
同学8079610 分钟前
🔥🔥高效易用的 Vue3 公告滚动组件:打造丝滑的内容滚动体验(附源码)
前端·vue.js
编程修仙12 分钟前
第二篇 Vue指令
前端·javascript·vue.js·前端框架
frontend丶CV17 分钟前
useMemo
前端·react.js
明月_清风18 分钟前
基于 node-rtsp-stream 的 Web 直播方案详解
前端
DEMO派21 分钟前
前端处理用户离开当前页面的方案及对比解析
前端
LFly_ice22 分钟前
Next-4-路由导航
开发语言·前端·javascript
chilavert31823 分钟前
技术演进中的开发沉思-267 Ajax:拖放功能
前端·javascript·ajax
守护砂之国泰裤辣24 分钟前
el-select 选项偏移 到左边 左上角
前端·javascript·vue.js