title: javascript profanity filter on a contenteditable div
body: <p>I am currently working on a site which filters bad words on an array. Whenever a user types a word on the textbox, an alert box appears if a word from the array was found. I'd like to do the same but instead of using a textbox, I'd like to use a contenteditable div. I'll be needing jquery on this but there seems to be some conflict on my code since the initial code was done in pure js. </p>
  
  <p>Fiddle link: <a href="http://jsfiddle.net/br7TD/" rel="nofollow">http://jsfiddle.net/br7TD/</a></p>
  
  <p>Here's the javascript:</p>
  
  <pre><code>var swear_words_arr=new Array("bad","evil","freak");
  var swear_alert_arr=new Array;
  var swear_alert_count=0;
  
  function reset_alert_count() {
  swear_alert_count=0;
  }
  
  function validate_user_text() {
  reset_alert_count();
  var compare_text=document.form1.user_text.value;
  
  for(var i=0; i&lt;swear_words_arr.length; i++) {
      for(var j=0; j&lt;(compare_text.length); j++)
      {
          if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
              {
                  swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
                  swear_alert_count++;
              }
      }
  }
  
  var alert_text="";  
  for(var k=1; k&lt;=swear_alert_count; k++)
  {
      alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
  }
  
  if(swear_alert_count&gt;0) {
      alert("Please refrain from using offensive words"); /* + alert_text */
      document.form1.user_text.select();
      }
  else {
      document.form1.submit();
  }
  }
  
  function select_area() {
  document.form1.user_text.select();
  }
  
  window.onload=reset_alert_count;
  </code></pre>
  
  <p>I'm pretty much new to this. Any help will be appreciated.</p>