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="">
<head>
<meta charset="utf-8" />
<title>Bad Words Blocker Test</title>
<script type="text/javascript" language="javascript">
var buttonPress = function ()
{
var = getElementById(ments);
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="ments" id="ments" rows="5" cols="50"></textarea>
<br />
<input id="formSub" type="submit" onclick="(buttonPress())" value="Submit!" />
</form>
</body>
</html>
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/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bad Words Blocker Test</title>
<script type="text/javascript" language="javascript">
var buttonPress = function ()
{
var = getElementById(ments);
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="ments" id="ments" rows="5" cols="50"></textarea>
<br />
<input id="formSub" type="submit" onclick="(buttonPress())" value="Submit!" />
</form>
</body>
</html>
-
Where do you define
str? – MCL Commented Jun 29, 2013 at 21:48 - Whoops. Well, there's one mistake. I'll fix it. It should be: function WordFilter(str) { return str.replace(rgx, "****"); } – user2535390 Commented Jun 29, 2013 at 21:54
- You can edit your question. Your current code makes no sense at all. – MCL Commented Jun 29, 2013 at 21:56
- 1 Don't forget that client-side checks can always be bypassed — you should make sure that you check the same things on the server if you really care. – icktoofay Commented Jun 29, 2013 at 23:22
- 1 Good luck with that! – tchrist Commented Jun 30, 2013 at 0:28
3 Answers
Reset to default 4It's good practice to breakdown actions to functions.
var button = document.getElementById('formSub');
function replaceWords(event) {
//Prevent form submission to server
event.preventDefault();
var mentContent = document.getElementById('ments');
var badWords = ["crap", "ugly", "brat", "basterddouch"];
var censored = censore(mentContent.value, badWords);
mentContent.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
var my = "You son of a bitch.You are fool . www.google.";
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./javaquery/regexp
Edit:
Add your bad words in the regular expression. Followed by | (or)
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/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bad Words Blocker Test</title>
<script type="text/javascript" language="javascript">
var buttonPress = function ()
{
var = document.getElementById('ments');
var filterWords = ["crap", "ugly", "brat"];
// "i" is to ignore case and "g" for global
var rgx = new RegExp("("+filterWords.join("|")+")", "gi");
.value = .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="ments" id="ments" rows="5" cols="50"></textarea>
<br />
<input id="formSub" type="submit" value="Submit!" />
</form>
</body>
</html>