日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間:2023/12/8 HTML 51 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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="https://cdn.bootcdn.net/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="https://cdn.bootcdn.net/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>

效果圖:


通過如上的操作,我們就可以輕松的解決特殊表情和特殊符號的問題了。你學廢了嗎?
歡迎大家交流評論,一鍵三連。~~~!!!!!

總結

以上是生活随笔為你收集整理的js前端处理过滤特殊字符以及输入法特殊表情符号emoji的正则方法,解决数据库报错问题。的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。