javascript profanity filter on a contenteditable div
<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>Sorry for the noobish question, I'm pretty much new to this. Any help will be appreciated.</p>
