Javascript clearing comments of swear words

Question

I am creating a comments board and via Javascript i am attempting to implement a piece of script which will prevent the user from submitting a paragraph if it has a undesirable word(s) in it. I have looked online and struggled to find any examples. This is what i have so far but not sure if i should be using index.of

index.php

<div class="askComment">
    <h2>Submit new comment</h2>
    <!--comment form -->
    <form id="form" method="post">
        <!-- need to supply post id with hidden fild -->
        <input type="hidden" name="postid" value="<?php echo $post; ?>">
        <input type="hidden" name="type" value="A">
            <p>Hello <strong><?php echo $fname; ?></strong> what do you have to say</p>
            <input type="hidden" name="fname" id="comment-name" value="<?php echo $fname; ?>" >
            <input type="hidden" name="userid" id="comment-mail" value="<?php echo $UserId; ?>" >
            <p>Your comment *</p>
            <textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." ></textarea>
            <div id="error"></div>
        <input type="submit" id="submit-comment" name="submit" value="Submit Comment">
    </form>
    </div>

mod_comment.php

$(document).ready(function () {

    document.getElementById("submit-comment").disabled = true;

    var swear = new Array();
    swear[0] = "jelly";
    swear[1] = "trumpet";
    swear[2] = "chocolate";

    $("#comment").change(function () {

        var comment = $("#comment").val();

        if (comment.indexOf('????') === -1) {
            $("#error").html('<font color="red">Please rewrite <strong>bad</strong> word found.</font>');
        } else {
            document.getElementById("loginsubmit").disabled = false;
        }

    });
});

Answer 1

One possible solution (similar to your, same logic, just few changes/additions).

http://jsfiddle.net/pK7DK/

$("#submit-comment").attr('disabled', true);

var swear = new Array();
swear[0] = "jelly";
swear[1] = "trumpet";
swear[2] = "chocolate";

$("#comment").on("keyup", function () {

  var comment = $("#comment").val();

  word = comment.split(' ');

  for (i = 0; i < word.length; i++) {

    worda = word[i].trim();

    worda = worda.replace(/\.|,|!|:| |;|\?|\r?\n/g, ''); // bad word + one of chars = bad word

    console.log(worda);

    if ($.inArray(worda, swear) != -1) {
      $("#error").html('<font color="red">Please rewrite <strong>bad</strong> word found.</font>');
      $("#submit-comment").attr('disabled', true);
      break;
    } else {
      $("#error").html('');
      $("#submit-comment").attr('disabled', false);
    }
  }

});

I would rather use 'keyup' event, so user will get error message(s) as he type. However - as mentioned, this can be easily overriden, server-side checking is a must.

Answer 2

Take a look at this: http://www.w3schools.com/jsref/jsref_search.asp (searches an array inside of an array);

It may not be the most optimal option, but it will be a start for your code.

EDIT: A better option (not the best, maybe) could be separating the comment string by words into an array and doing an intersection between the two arrays, here's a question explaining how to do intersections between arrays in js Simplest code for array intersection in javascript