js前端處理過濾特殊字元以及輸入法特殊表情符號emoji的正則方法,解決資料庫報錯問題。
阿新 • • 發佈:2021-02-04
現在,輸入法基本上都支援表情輸入和特殊字元,並且可以在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>
效果圖:
通過如上的操作,我們就可以輕鬆的解決特殊表情和特殊符號的問題了。你學廢了嗎?
歡迎大家交流評論,一鍵三連。~~~!!!!!