Page 1 of 1

JavaScript string replace censorship

Posted: Mon Jan 19, 2009 5:15 am
by JAB Creations
I'm working on putting together a function to censor cursing in my chat room via JavaScript. Everything I come across are either politically charged topics that have nothing to do with JavaScript or people who in half a heart beat run with their tails between their legs to some third party DHTML module, weak.

I'm trying to think of a way to avoid constantly looping each string for every single word I want to do a string replace on. Any nice examples (that don't depend on third party modules like jQuery or Prototype) would be much appreciated.

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 5:48 am
by papa
Just curious, any perticular reason using JS instead of only PHP ? :crazy:

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 6:02 am
by JAB Creations
It's a chat room, so why put unnecessary load on the server? 8O

This is a basic working example...

Code: Select all

<script type="text/javascript">var cen_s=['snorkel','s******']; var message_c1 = "The bad word of the day is snorkel!";var message_c2 = message_c1.replace(cen_s[0], cen_s[1]); alert(message_c2);</script>
Any one know how to create a multidimensional array that I can program a loop to go through the array_name.length for each word to be censored? I'm going to have to work with letter casing as well, hm...

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 6:20 am
by papa
Mmm smart. :)

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 6:28 am
by JAB Creations
Just trying to implement what I learn here at the forums. :wink:

I haven't worked with arrays much in general and when I started to it was mostly with PHP.

Here is what I have...

Code: Select all

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title></title></head> <body> <script type="text/javascript">//<![CDATA[var cen_s=['snorkel','s******']; var message_c1 = "The bad word of the day is snorkel!";var message_c2 = message_c1.replace(cen_s[0], cen_s[1]); document.write(message_c2);//]]></script> <br /><br /> <script type="text/javascript">//<![CDATA[var censor = new Array("bad","good","apple","orange");  var message_c1 = "The bad word of the day is snorkel!";var message_c2 = message_c1.replace(cen_s[0], cen_s[1]);document.write(censor[0] + ' ' + censor[1]);  //]]></script> </body></html>
Now I'm only using document.write only because I'm trying to blast through this otherwise all my live work must work with application/xhtml+xml.

Any way I figure I will end up counting the array's length, dividing by half, and then executing the loop (with replacing harsh words via var a = i++; and then replacing the word with var a).

I'll post my progress afterwards.

Oh...and there is some PHP that will be involved. I'm going to implement a warning system and if you swear then the script will AJAX "touch" the server with your user id and a record will be made in a MySQL table. So not only do I avoid doing regex on the server...and letting people openly drop f-bombs to drive the server load up but I can also without burning an ounce of bandwidth make records of who breaks my site's TOS. :twisted:

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 6:32 am
by Eran
If you are censoring all the words with the same pattern, you don't need an multidimensional array. How about something like this:

Code: Select all

var badwords = ['smurf','snorkel','slug'];
function censor(text,badwords) {
    for(var i in badwords) {
        var word = badwords[i];
        var replacement = word.substr(0,1);
        for(var j = 1; j < word.length;j++) replacement += '*';
        var text = text.replace(word,replacement);
    }
    return text;
}
 
var text = 'the bad smurf snorkeled the slug';
alert(censor(text,badwords));
You can create a cache of words to censor (the badwords array) and load it as a separate javascript file.

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 7:06 am
by JAB Creations
pytrin, you kick a**! :wink:

I commend you on using var to declare variable though once something is declared it doesn't need to be redeclared so on line 16 I've simply removed the "var " bit and there are absolutely no errors or warnings which is what I'm aiming for in the version of my site I'm working on now. This script also so dead on with what I wanted to do so thanks a ton! I have taken your awesome example and reformed it slightly to emulate what I'm doing with the chat room I'm working on. Ok so innerHTML isn't exactly the most standards compliant way to do stuff but it works. :roll:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Simple JavaScript Censorship</title><script type="text/javascript">//<![CDATA[var text = 'the bad smurf snorkeled the slug';var badwords = ['smurf','snorkel','slug']; function censor(text,badwords) {    for(var i in badwords) {        var word = badwords[i];        var replacement = word.substr(0,1);        for(var j = 1; j < word.length;j++) replacement += '*';        text = text.replace(word,replacement);    }    return text;}//alert(censor(text,badwords));//]]></script></head> <body> <div><p id="stuff">stuff</p></div> <div><a onclick="document.getElementById('stuff').innerHTML = censor('the bad smurf snorkeled the slug',badwords);">click this</a></div> </body></html>

Re: JavaScript string replace censorship

Posted: Mon Jan 19, 2009 1:53 pm
by kaszu

Code: Select all

text = text.replace(word,replacement);
will replace only first occurrence of the word, so text "smurf smurf" will become "***** smurf", not "***** *****".

Instead of simple .replace you need to use regular expression

Code: Select all

word = new RegExp(word, 'gi');
text = text.replace(word,replacement);

Re: JavaScript string replace censorship

Posted: Tue Jan 20, 2009 1:40 pm
by JAB Creations
I intended to reply sooner though some things have delayed me.

Any way pytrin's post sets a solid foundation and with kaszu's added notes this now works beautifully! As kaszu mentioned pytrin's code will only censor the first instance of any given word we wish to censor so this code below will censor all instances of a word no matter how many times they are repeated. Thanks to both of you for your help! :)

Code: Select all

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Simple JavaScript Censorship</title><script type="text/javascript">//<![CDATA[var text = 'the bad smurf smurf smurf gi snorkeled snorkeled the slug slug';var badwords = ['smurf','snorkel','slug']; function censor(text,badwords) {    for(var i in badwords)    {        var word = badwords[i];        var replacement = word.substr(0,1);        for(var j = 1; j < word.length;j++) replacement += '*';        word = new RegExp(word, 'gi');        text = text.replace(word,replacement);    }    return text;}//]]></script></head> <body> <div><p id="stuff">stuff</p></div> <div><a onclick="document.getElementById('stuff').innerHTML = censor('123 the bad smurf and other smurfs snorkeled the slug',badwords);">click this to show censored message</a></div> </body></html>

Re: JavaScript string replace censorship

Posted: Tue Jan 20, 2009 8:45 pm
by ashel
You probably already thought of this, but the tip I posted on your other thread would also let you check for multiple instances in this situation as well?