1

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>
raam86
  • 6,785
  • 2
  • 31
  • 46
user2535390
  • 11
  • 1
  • 3

3 Answers3

4

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

raam86
  • 6,785
  • 2
  • 31
  • 46
  • Thanks, both of you! I didn't know I had so many problems with it—thanks! – user2535390 Jun 29 '13 at 23:14
  • @denomales trying to keep it clean ;) – raam86 Jun 30 '13 at 04:41
  • 1
    This code is susceptible to the [Scunthorpe problem](http://en.wikipedia.org/wiki/Scunthorpe_problem). – John Dvorak Jun 30 '13 at 04:41
  • @JanDvorak Thank you for an extremely interesting link. It would be interesting to see how many words are actually susceptible. I wanted it to be ****hole but on the other I don't want false positives – raam86 Jun 30 '13 at 06:04
  • 1
    for one, there is the game of [craps](http://en.wikipedia.org/wiki/Craps). Also, there's a [small village on the Prince Edward Island](http://en.wikipedia.org/wiki/Crapaud,_Prince_Edward_Island) and also a [genus of fish](http://en.wikipedia.org/wiki/Crappie). Banning [ugly](http://en.wikipedia.org/wiki/Ugly) is probably a bad idea altogether. Not to mention "lab rat" is sometimes written without the space and also there used to be a [guy with that name](http://en.wikipedia.org/wiki/Dunash_ben_Labrat). Oh, I forgot about the [capital of Slovakia](http://en.wikipedia.org/wiki/Bratislava). Enjoy – John Dvorak Jun 30 '13 at 06:13
2
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)

Vicky Thakor
  • 3,847
  • 7
  • 42
  • 67
0

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>
dimaninc
  • 765
  • 5
  • 16