CODEWITHSUNDEEP
javascriptregex
user2535390
user2535390

Reputation: 11

How to block bad words upon form submit

I'm new to Javascript, so bear with me. The goal of this code is simply to block the words "crap", "ugly", and "brat" inside of the textarea upon form submit. I want it so that, after the user presses submit, the bad words will star out (**). This is purely a practice lesson I've been assigned, so it doesn't need to have any real use.

The problem with this code is that, once you press submit, all the text in textarea disappears. Therefore, there aren't any words to block anymore.

Here's the code:

<!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>

Upvotes: 1

Views: 9328

Answers (3)

Vicky Thakor
Vicky Thakor

Reputation: 3916

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);

Use the above code with in java script block. For more java script based regular expression. Check out the regexp library https://github.com/javaquery/regexp

Edit: Add your bad words in the regular expression. Followed by | (or)

Upvotes: 2

raam86
raam86

Reputation: 6871

It's good practice to breakdown actions to functions. 

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);

You can see a working example here ==> JSfiddle

Upvotes: 4

dimaninc
dimaninc

Reputation: 850

you should call the WordFilter() function

also you should catch onSubmit event of form, not click of button

and you called getElementById the wrong way

and the regexp was made incorrectly :)

so the code should be something like this (it works, i've tested):

<!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 = document.getElementById('comments');
            var filterWords = ["crap", "ugly", "brat"];
            // "i" is to ignore case and "g" for global
            var rgx = new RegExp("("+filterWords.join("|")+")", "gi");
            com.value = com.value.replace(rgx, "****");

            // change this to 'return true;' when you will be sure that all your bad words are catched and the form is ready to be submitted
            return false;
        }
    </script>
</head>
<body>
    <form name="badwords" method="post" action="" onsubmit="return buttonPress();">
    <textarea name="comments" id="comments" rows="5" cols="50"></textarea>
    <br />
    <input id="formSub" type="submit" value="Submit!" />
    </form>
</body>
</html>

Upvotes: 0

Related Questions