前端实现敏感字过滤

Posted 2020-10-16 王振宇

在开发聊天或者留言之类的功能的时候，通常需要过滤敏感词，下面总结了两种方法。

1、迭代敏感字数组，拼接过滤敏感字正则，然后利用 replace 把匹配到的敏感字替换为*

dom结构如下：

<textarea rows="5" cols="50" id="txt1">你家的狗呢，傻，傻比，儿，儿子</textarea>
<br>
<input type="button" value="点击生成过滤后的文字" onclick="showText()" />
<P>过滤后的文字:</P>
<textarea rows="5" cols="50" id="txt2"></textarea>

js代码如下：

// 过滤敏感字方法
function filterText(Text) {
    // 敏感字库
    var sensitiveWordsList = ["狗","儿子","草","傻比"];
    // 准备拼接的敏感字串
    var sensitiveWords = "";
    for(var i=0;i<sensitiveWordsList.length;i++){
        if(i<sensitiveWordsList.length-1){
            sensitiveWords += sensitiveWordsList[i]+"|";
        }else{
            sensitiveWords += sensitiveWordsList[i];
        }
        
    };
    // 拼接敏感字正则
    eval("var reBadWords = /"+sensitiveWords+"/gi;");
    // 替换敏感字
    var outText = Text.replace(reBadWords, "*");
    
    // confirm弹框
    if(outText!=Text){
        var r=confirm("你的留言中含有不恰当的词语,系统已自动为你修改,是否继续提交?");
        if(r==true){
            return outText;
        }else{
            return "";
        }
    }else{
        return outText;
    }
};

// 按钮点击方法
function showText() {
    var oInput1 = document.getElementById("txt1");
    var oInput2 = document.getElementById("txt2");
    oInput2.value = filterText(oInput1.value);
};

2、同样迭代敏感字数组，但是在迭代过程中匹配每一个敏感字，利用 replace 把匹配到的敏感字替换为*

dom结构如下：

<textarea rows="5" cols="50" id="txt1">你家的狗呢，傻，傻比，儿，儿子</textarea>
<br>
<input type="button" value="点击生成过滤后的文字" onclick="showText()" />
<P>过滤后的文字:</P>
<textarea rows="5" cols="50" id="txt2"></textarea>

js代码如下：

// 过滤敏感字方法
function filterText(Text) {
    // 敏感词库
    var sensitiveWordsList = ["狗","儿子","草","傻比"];
    // 过滤后的文字
    var outText = "";
    // 遍历敏感词库，替换为*，并把处理后的文字赋值给outText
    for(var i=0;i<sensitiveWordsList.length;i++){
        var pattern = new RegExp(sensitiveWordsList[i],"g");
        outText = Text.replace(pattern,"*");
        
    };
    // confirm弹框
    if(outText!=Text){
        var r=confirm("你的留言中含有不恰当的词语,系统已自动为你修改,是否继续提交?");
        if(r==true){
            return outText;
        }else{
            return "";
        }
    }else{
        return outText;
    }
    
};

// 按钮点击方法
function showText() {
    var oInput1 = document.getElementById("txt1");
    var oInput2 = document.getElementById("txt2");
    oInput2.value = filterText(oInput1.value);
};

对比两种方法，不难看出第二种方法要更好一点，因为第一种方法中有对字符串拼接的操作，更耗时一些。

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。