Using Methods in Javascript Replace Method

By Ben Nadel

Published 2006-05-15 in JavaScript / DHTML — Comments (6)

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.

Short link: https://bennadel.com/55

Reader Comments

carcomplaints.com Nov 30, 2006 at 11:22 AM

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.

Ben Nadel Nov 30, 2006 at 12:02 PM

15,902 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).