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

相关推荐
hunterandroid17 小时前
内存泄漏与 LeakCanary:从问题定位到修复思路
前端
用户946883150575017 小时前
四、elpis 基于 vue3 完成动态组件库建设
前端
用户2986985301417 小时前
如何在 JavaScript 和 React 中下载/导出 Excel 文件
前端·javascript·react.js
anyup17 小时前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
Coffeeee17 小时前
从 Android 15 到 Android 17,谷歌猝不及防的音频改动
android·前端·google
雪隐17 小时前
用Flutter做背单词APP-00前言
前端·人工智能·后端
何时梦醒17 小时前
前端存储全攻略 & JavaScript this 绑定完全指南
前端·javascript·面试
前端百草阁17 小时前
JavaScript 设计模式(23 种)
开发语言·前端·javascript·设计模式
用户693717500138417 小时前
AI 领域的 Harness,到底是什么意思?
android·前端·后端
spider_xcxc17 小时前
Redis 深度实践:安全管控、性能压测与持久化分析(二)
运维·前端·redis·云计算·bootstrap·运维开发