Skip to main content
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with: Aurélien Deleusière
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with: Aurélien Deleusière ( @adeleusiere )

Using Methods in Javascript Replace Method

By on

NOTE: For a FULL TUTORIAL on Javascript String Replace methods, check out this entry: Ask Ben: Javascript String Replace Method.

I was just going through some Javascript code when I came across the coolest thing on BigBold.com. I never knew you could do this, but you can use a nameless method as the "replace" argument to the Javascript String replace() method call. See in the example below that I take a string and turn each non-vowel characer into a randomly upper or lowercase character:

// Turns the vowel characters into random cases.
String.prototype.RandomCase = function(){
	return(
		this.replace(

			// Here, we are passing in a nameless function as the parameter for
			// the "replace" argument of the String Replace method. It uses the $1
			// to refer to the grouping of vowels found in the regular expression.
			function($1){
				// Get a random number.
				if (Math.random() > .5){
					// Lowercase this one.
					return( $1.toLowerCase() );
				} else {
					// Uppercase this one.
					return( $1.toUpperCase() );
				}
			}
		)
	);
}

// Create a test string with plenty of vowels.
var strTest = "Ben Nadel is a Pretty Nice Guy. I really like Kinky Solutions and his Coding Style.";

// Alert the random-cased string.
alert( strTest.RandomCase() );

In this case we are using "$1" to keep the usual formatting of Regular Expressions (RegExp), however, we could have easily named the argument strMatch or something along those lines. The groups found in the RegExp match are passed to the function in the order that they appear (ie. $1, $2, $3, etc.).

The "replace" function argument doesn't need to be confined to the scope of the replace() method call. The "replace" argument is a sub-function just like any other sub function and has access to its parent scope. In the following example, we return an array of the small, common words found in the string. We build this array by declaring prior to the replace() method call and then adding to it for each iteration of the replace() match:

String.prototype.GetSmallWords = function(){
	// Declare the array that will hold the small words matches.
	var arrWords = new Array();

	// Take the string value and get copy the small words into an array.
	this.replace(
		new RegExp("(a|and|be|do|for|go|he|hi|i|in|is|no|of|on|the|to)", "gi"),

		// This replace function takes the word found and adds the
		// word to the locally-defined array of short words in the
		// parent function.
		function( strWord ){
			arrWords[ arrWords.length ] = strWord;
		}
		);

	// Return the array of little words.
	return( arrWords );
}

// Create a test string with small words.
var strTest = "Ben Nadel is a Pretty Nice Guy. I really like Kinky Solutions and his Coding Style.";

// Alert the array of small words.
alert( strTest.GetSmallWords() );

Want to use code from this post? Check out the license.

Reader Comments

1 Comments

Some of the code in the first example & wording describing it is confusing & possibly misleading:

> function($1){ .... }
>
> The groups found in the RegExp match are passed to the function in the order that they appear (ie. $1, $2, $3, etc.).

The order of parameters passed to any lambda function used in a replace statement is (fullmatchresult, $1, $2 $3, ..)

.. so in your first example, your variable "$1" does not actually equal the $1 result from the regexp match .. it's the full match result.

15,640 Comments

You are exactly correct. This was a misunderstanding on my part. I didn't realize quite what was going on until I started using the Java Pattern Matcher. The Java Pattern matcher has a group() method to which you can pass indexes. The method call with no index returns the full match. Seeing this helped me (in some sort of eureka moment) that I didn't fully understand the way Javascript replace was working.

Thanks for pointing that out for others (as I did not update this blog entry).

1 Comments

Thank you sooooo much!
I was doing a google search and you lead me right to a solution. :)

I was wondering if arrays could be use with replace as they can in PHP, but if not you gave me another solution for code optimization!

1 Comments

So if your description is not exactly correct, could you update you blog or give some reference material? Because I need more than one matches.

15,640 Comments

@Faintsmile,

You wouldn't need to use methods in the replace method for that - it would just be a simple regular expression character class:

"beta".replace( new RegExp( "[aeiou]", "gi" ), "*" )

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel