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

相关推荐
爱分享的鱼鱼11 分钟前
Vue生命周期钩子详解与实战应用
前端·vue.js
晴殇i29 分钟前
CSS Grid 与 Flexbox:现代前端布局的双子星
前端·css
曹卫平dudu33 分钟前
一起学习TailWind Css
前端·css
sosojie40 分钟前
and+design的table前端本地分页处理
前端·vue.js
炫饭第一名41 分钟前
前端玩转 AI 应用开发|SSE 协议与JS中的流式处理🌊
前端·人工智能·程序员
前端老宋Running1 小时前
一种名为“Webpack 配置工程师”的已故职业—— Vite 与“零配置”的快乐
前端·vite·前端工程化
用户6600676685391 小时前
从“养猫”看懂JS面向对象:原型链与Class本质拆解
前端·javascript·面试
parade岁月1 小时前
我的第一个 TDesign PR:修复 Empty 组件的 v-if 警告
前端
云鹤_1 小时前
【Amis源码阅读】低代码如何实现交互(下)
前端·低代码·架构
StarkCoder1 小时前
一次搞懂 iOS 组合布局:用 CompositionalLayout 打造马赛克 + 网格瀑布流
前端