前端實現敏感字過濾

在開發聊天或者留言之類的功能的時候，通常需要過濾敏感詞，下面總結了兩種方法。

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、迭代敏感字數組，將輸入內容中的敏感字替換為“*”

 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");
        if(i == 0){
            outText = Text.replace(pattern,"*");
        }else{
            outText = outText.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);
};

對比兩種方法，不難看出第二種方法要更好一點，因為第一種方法中有對字符串拼接的操作，更耗時一些。

如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。