Javascript 如何在表单提交时阻止坏词

Javascript 如何在表单提交时阻止坏词,javascript,regex,Javascript,Regex,我不熟悉Javascript,所以请耐心听我说。这段代码的目的只是在表单提交时将“垃圾”、“丑陋”和“顽皮”这几个词屏蔽在文本区域内。我希望这样,在用户按下submit后,坏词将开始显示(**)。这纯粹是我分配的练习课,所以它不需要有任何实际用途 此代码的问题是,一旦按submit,textarea中的所有文本都会消失。因此,没有任何单词可以阻止了 代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1

我不熟悉Javascript,所以请耐心听我说。这段代码的目的只是在表单提交时将“垃圾”、“丑陋”和“顽皮”这几个词屏蔽在文本区域内。我希望这样,在用户按下submit后,坏词将开始显示(**)。这纯粹是我分配的练习课,所以它不需要有任何实际用途

此代码的问题是,一旦按submit,textarea中的所有文本都会消失。因此,没有任何单词可以阻止了

代码如下:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bad Words Blocker Test</title>
    <script type="text/javascript" language="javascript">

        var buttonPress = function ()
        {
            var com = getElementById(comments);
            var filterWords = ["crap", "ugly", "brat"];
            // "i" is to ignore case and "g" for global
            var rgx = new RegExp(filterWords.join(""), "gi");
              function WordFilter(str) {
            return str.replace(rgx, "****");
        }               
        }
    </script>
</head>
<body>
    <form name="badwords" method="post" action="">
    <textarea name="comments" id="comments" rows="5" cols="50"></textarea>
    <br />
    <input id="formSub" type="submit" onclick="(buttonPress())" value="Submit!" />
    </form>
</body>
</html>

坏话屏蔽测试
var buttonPress=函数()
{
var com=getElementById(注释);
var filterWords=[“垃圾”、“丑陋”、“顽皮”];
//“i”表示忽略大小写,“g”表示全局
var rgx=newregexp(filterWords.join(“”,“gi”);
函数字过滤器(str){
返回str.replace(rgx,“****”);
}               
}


您应该调用
WordFilter()函数

您还应该捕获表单的提交事件,而不是按钮的单击

而您调用的
getElementById
方法错误

并且regexp制作不正确:)

所以代码应该是这样的(它可以工作,我已经测试过):


坏话屏蔽测试
var buttonPress=函数()
{
var com=document.getElementById('comments');
var filterWords=[“垃圾”、“丑陋”、“顽皮”];
//“i”表示忽略大小写,“g”表示全局
var rgx=new RegExp(“(”+filterWords.join(“|”)+”,“gi”);
com.value=com.value.replace(rgx,“****”);
//将此选项更改为“return true;”,这样您就可以确保所有的脏话都被抓住,并且表单已经准备好提交
返回false;
}


您应该调用
WordFilter()函数

您还应该捕获表单的提交事件,而不是按钮的单击

而您调用的
getElementById
方法错误

并且regexp制作不正确:)

所以代码应该是这样的(它可以工作,我已经测试过):


坏话屏蔽测试
var buttonPress=函数()
{
var com=document.getElementById('comments');
var filterWords=[“垃圾”、“丑陋”、“顽皮”];
//“i”表示忽略大小写,“g”表示全局
var rgx=new RegExp(“(”+filterWords.join(“|”)+”,“gi”);
com.value=com.value.replace(rgx,“****”);
//将此选项更改为“return true;”,这样您就可以确保所有的脏话都被抓住,并且表单已经准备好提交
返回false;
}


将操作分解为函数是一种很好的做法

var button = document.getElementById('formSub');

function replaceWords(event) {
    //Prevent form submission to server 
    event.preventDefault();
    var commentContent = document.getElementById('comments');
    var badWords = ["crap", "ugly", "brat", "basterddouch"];
    var censored = censore(commentContent.value, badWords);
    commentContent.value = censored;
}

function censore(string, filters) {
    // "i" is to ignore case and "g" for global "|" for OR match
    var regex = new RegExp(filters.join("|"), "gi");
    return string.replace(regex, function (match) {
        //replace each letter with a star
        var stars = '';
        for (var i = 0; i < match.length; i++) {
            stars += '*';
        }
        return stars;
    });

}

button.addEventListener('click', replaceWords);
var-button=document.getElementById('formSub');
函数替换字(事件){
//阻止表单提交到服务器
event.preventDefault();
var commentContent=document.getElementById('comments');
var badWords=[“垃圾”、“丑陋”、“顽童”、“混蛋”];
var-censtered=censtore(commentContent.value,坏话);
commentContent.value=已删除;
}
函数检查(字符串、筛选器){
//“i”表示忽略大小写,“g”表示全局“|”表示或匹配
var regex=new RegExp(filters.join(“|”),“gi”);
返回字符串.replace(正则表达式,函数(匹配){
//用星号替换每个字母
var星='';
对于(变量i=0;i

您可以在这里看到一个工作示例==>将操作分解为函数是一种很好的做法

var button = document.getElementById('formSub');

function replaceWords(event) {
    //Prevent form submission to server 
    event.preventDefault();
    var commentContent = document.getElementById('comments');
    var badWords = ["crap", "ugly", "brat", "basterddouch"];
    var censored = censore(commentContent.value, badWords);
    commentContent.value = censored;
}

function censore(string, filters) {
    // "i" is to ignore case and "g" for global "|" for OR match
    var regex = new RegExp(filters.join("|"), "gi");
    return string.replace(regex, function (match) {
        //replace each letter with a star
        var stars = '';
        for (var i = 0; i < match.length; i++) {
            stars += '*';
        }
        return stars;
    });

}

button.addEventListener('click', replaceWords);
var-button=document.getElementById('formSub');
函数替换字(事件){
//阻止表单提交到服务器
event.preventDefault();
var commentContent=document.getElementById('comments');
var badWords=[“垃圾”、“丑陋”、“顽童”、“混蛋”];
var-censtered=censtore(commentContent.value,坏话);
commentContent.value=已删除;
}
函数检查(字符串、筛选器){
//“i”表示忽略大小写,“g”表示全局“|”表示或匹配
var regex=new RegExp(filters.join(“|”),“gi”);
返回字符串.replace(正则表达式,函数(匹配){
//用星号替换每个字母
var星='';
对于(变量i=0;i
您可以在这里看到一个工作示例==> 在java脚本块中使用上述代码。有关更多基于java脚本的正则表达式。查看regexp库

编辑: 在正则表达式中添加您的脏话。后跟
|
(或)

在java脚本块中使用上述代码。有关更多基于java脚本的正则表达式。查看regexp库

编辑:
在正则表达式中添加您的脏话。然后是
|
(或)

你在哪里定义
str
?哎哟。嗯,有一个错误。我会修好的。它应该是:函数WordFilter(str){return str.replace(rgx,****”;}您可以编辑您的问题。你当前的代码毫无意义。别忘了客户端检查总是可以绕过的——如果你真的在乎的话,你应该确保在服务器上检查相同的东西。!你在哪里定义str呢。嗯,有一个错误。我会修好的。它应该是:函数WordFilter(str){return str.replace(rgx,****”;}您可以编辑您的问题。你当前的代码毫无意义。别忘了客户端检查总是可以绕过的——如果你真的需要,你应该确保在服务器上检查相同的东西
var my = "You son of a bitch.You are fool . www.google.com";
var badWord = /crap|ugly|brat|fool|fuck|fucking|f\*cking|f\*ck|bitch|b\*tch|shit|sh\*t|fool|dumb|couch potato|arse|arsehole|asshole|\*ssh\*l\*|\*\*\*\*|c\*ck|\*\*\*\*sucker|c\*cks\*ck\*r|\*\*\*\*|c\*nt|dickhead|d\*c\*h\*a\*|\*\*\*\*|f\*c\*|\*\*\*\*wit|f\*ckw\*t|fuk|f\*k|fuking|f\*k\*ng|mother\*\*\*\*er|m\*th\*rf\*ck\*r|\*\*\*\*\*\*|n\*gg\*r|pussy|p\*ssy|\*\*\*\*|sh\*t|wanker|w\*nk\*r|wankers|w\*nk\*rs|whore|wh\*r\*|slag| sl\*g|\*\*\*\*\*|b\*tch|f u c k|f\*c\*|b.i.t.c.h|b\*tch|d-i-c-k|d\*\*\*/gi;
my = my.replace(badWord,"****");
alert(my);