600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > js前端处理过滤特殊字符以及输入法特殊表情符号emoji的正则方法 解决数据库报错问题。

js前端处理过滤特殊字符以及输入法特殊表情符号emoji的正则方法 解决数据库报错问题。

时间:2023-11-30 05:59:13

相关推荐

js前端处理过滤特殊字符以及输入法特殊表情符号emoji的正则方法 解决数据库报错问题。

现在,输入法基本上都支持表情输入和特殊字符,并且可以在input框内输入表情,

如果我们不对这些表情进行验证的话,我们会发现,有的时候也可以正常

进行保存,但是这样会存在一定的问题,比如当我们把我们的数据存入数据库的

时候,会发现有报错,因为UTF-8编码有可能是两个、三个、四个字节。

Emoji表情是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去。

遇到这种情况主要有两种解决方案

1.在后端存入数据库的时候,将Mysql的编码从utf8转换成utf8mb4。

2.在前端进行正则验证,当提交表情的时候进行排除。

前端处理表情时,正则的解决方案。

<script>var reg = /[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/ //这个就是关于前端验证特殊表情的正则。</script>

可以直接复制下面代码到html文件中进行验证。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/ajax/libs/jquery/3.5.1/jquery.js"></script></head><body><div class="input-box"><input type="text" class="val"><button class="btn">提交</button></div></body><script>$(document).on("click", ".btn", function () {var reg = /[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;var inputVal = $(".val").val();if(reg.test(inputVal)){alert("输入框内有特殊表情,请删除重新输入")}else {alert("验证通过")}})</script></html>

当然有的时候,我们也要对特殊符号做一些排除,我们可以使用如下的正则来解决这个问题,

把所有需要排除的特殊字符放进去即可,要注意的是\和[是需要//进行转义的

如果需要其他特殊字符如 · ^ 等等,我们直接在正则的后面追加即可。

<script>var reg_mark = /[`~!@#$%^&*()+=|{}':;',/\/\[\].<>/?~!@#¥%……&*()——+|{}【】‘;:”“’。,、?]/</script>

当我们需要让以上两种正则同时参加校验的时候,这样既可以排除特殊字符,又可以排除特殊标签。

我们可以使用|符号来进行连接,那么完整的代码就如下展示。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/ajax/libs/jquery/3.5.1/jquery.js"></script></head><body><div class="input-box"><input type="text" class="val"><button class="btn">提交</button></div></body><script>$(document).on("click", ".btn", function () {var newReg = /[`~!@#$%^&*()+=|{}':;',/\/\[\].<>/?~!@#¥%……&*()——+|{}【】‘;:”“’。,、?]|[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;var inputVal = $(".val").val();if(newReg.test(inputVal)){alert("输入框内有特殊表情或特殊字符,请删除重新输入")}else {alert("验证通过")}})</script></html>

效果图:

通过如上的操作,我们就可以轻松的解决特殊表情和特殊符号的问题了。你学废了吗?

欢迎大家交流评论,一键三连。~~~!!!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。