View Full Version : word replacement var issues

09-25-2010, 12:18 AM
I am altering a "bad word filter" for a silly project. Not looking to actually filter bad words. Here's what I have right now:

function filterText(sText) {

var rad1 = /dumb|lame/gi;
return sText.replace(rad1, "TOTALLY RAD!");


function showText() {
var oInput1 = document.getElementById("txt1");
var oInput2 = document.getElementById("txt2");
oInput2.value = filterText(oInput1.value);

So if the user types the words "dumb" or "lame" it is replaced by "TOTALLY RAD!"

The thing is, I want each word replaced to have it's own unique replacement word. I.e. "dumb" gets replaced by "cool" and "lame" gets replaced by "awesome"

Is there a way to define multiple replacements within sText.replace() similar to the way that I'm defining multiple words to be replaced: /dumb|lame/

I also tried just duplicating the var and return lines with their own unique var, etc. and that didn't work.

Am I approaching this from the wrong angle? Does it make more sense to use string?

This is how it will be implemented: http://benfinoradin.info/yes.htm
type into the top text box… try a sentence with "dumb" or "lame" in it.

09-25-2010, 04:15 AM
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<script type="text/javascript">
function filterText(sText){
var regExes = filterText.regExes, i = regExes.length - 1;
for (i; i > -1; --i){
sText = sText.replace(regExes[i][0], regExes[i][1]);
return sText;
filterText.regExes = [[/dumb/gi, 'cool'], [/lame/gi, 'awesome']];

function showText(){
var oInput1 = document.getElementById('txt1');
var oInput2 = document.getElementById('txt2');
oInput2.value = filterText(oInput1.value);
<style type="text/css">
.stizzy {
font-family: arial, helvetica, sans-serif;
font-size: 24px;

p {
text-align: center;
margin: 2em 0 0 0;

<textarea cols="50" rows="10" class="stizzy" id="txt1" onchange="showText();" onmousemove="showText();" onkeyup="showText();"></textarea><br>
<textarea cols="50" rows="10" class="stizzy" id="txt2" onchange="showText();" onmousemove="showText();" onkeyup="showText();"></textarea>

09-25-2010, 02:26 PM
thank you kind sir!

09-25-2010, 04:00 PM
This is more efficient, and easier to configure and expand:

<script type="text/javascript">
var bad = /(dumb|lame)/gi;
function toGood(a){
var lc = a.toLowerCase();
return (
lc === 'dumb'? 'cool' :
lc === 'lame'? 'awesome' :
String.prototype.badToGood = function(){return this.replace(bad, toGood);};

function showText(){
var oInput1 = document.getElementById('txt1').value;
var oInput2 = document.getElementById('txt2');
oInput2.value = oInput1.badToGood();

Note: Works in all modern browsers. However, in IE 5 and less there is no support for function as the replacement argument.

09-26-2010, 08:00 PM
Thanks again John - this is working great!

I'm not sure if this would be possible to do only within the regex, but how would I tell the script to add punctuation and change to all caps if it doesn't find anything to replace?

09-26-2010, 11:04 PM
Add punctuation where, according to what criteria?

You can easily change it all to upper case if no match is found, change:

String.prototype.badToGood = function(){return this.replace(bad, toGood);};


String.prototype.badToGood = function(){return !bad.test(this)? this.toUpperCase() : this.replace(bad, toGood);};