Compare Array Of Words To A Textarea Input With Javascript

I have a textarea inside a form. Before the form is submitted, the textarea is validated and checked so it is not empty, not over 2000 characters, not contain forbidden characters

Solution 1:

If you wanted to check for the presence of "expletive1" and "expletive2" you'd do the following:

my_textarea = document.getElementById('textarea_id');

if (/\b(?=\w)(expletive1|expletive2)\b(?!\w)/i.test(my_textarea.value)) {
    // we found bad words!  do something
} else {
    // no bad words found, carry on, nothing to see here
}

And you'd just add more words to the list in the same manner (expletive1|expletive2|expletive3|expletive4)

Keep in mind that to keep the words out of your app entirely you'll also need to do server-side filtering.

Solution 2:

var bad_words = ['stupid', 'dang']; // watered down
for (var i = 0; i <= bad_words.length; i++) {
    if (document.getElementById('my_textarea').value.match(bad_words[i])) {
        // has bad word!
    }
}

This will keep your code a bit neater, because you don't have to have 100 words in one regex match.

Solution 3:

This code replaces bad words with *****

// creating regex
var words = ['bad', 'words'];
var wordsStr = "";
for(var i=0; i<words.length; i++) {
    wordsStr += words[i];
    if (i < words.length -1) {
        wordsStr += "|";
    }
}
// wordsStr is "bad|words"
var regex = new RegExp(wordsStr, "gi"); // g: replace all; i:insensitive

// replacing
var text = "I cant say bad words!";
text = text.replace(regex, "****");
// text is "I cant say **** ****!"

---

See in jsfiddle

Solution 4:

var bad_words = new Array('word1', 'word2');
var user_words = document.getElementById('textarea').split(/\W+/);

for( var i in bad_words)
{
  if( user_words.indexOf( bad_words[i] ) != -1 )
  {
    alert( 'The textarea has bad word!');
    break;
  }
}

Solution 5:

You can downvote me if you want, but maybe just don't make the clbuttic mistake of trying to filter in the first place :D