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

程序员文章站 2022-03-10 21:35:08

现在，输入法基本上都支持表情输入和特殊字符，并且可以在input框内输入表情，如果我们不对这些表情进行验证的话，我们会发现，有的时候也可以正常进行保存，但是这样会存在一定的问题，比如当我们把我们的数据存入数据库的时候，会发现有报错，因为UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而MySQL的utf8编码最多3个字节，所以数据插不进去。遇到这种情况主要有两种解决方案1.在后端存入数据库的时候,将Mysql的编码从utf8转换成utf8mb4。2.在前端进行正则验证，当...

现在，输入法基本上都支持表情输入和特殊字符，并且可以在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>