Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with:

Using Methods in Javascript Replace Method

By Ben Nadel 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(
  • new RegExp("([aeiou]{1})", "gi"),  
  • // 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() );
Tweet This Interesting post by @BenNadel - Using Methods in Javascript Replace Method Thanks my man — you rock the party that rocks the body!



Reader 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.

Reply to this Comment

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).

Reply to this Comment

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!

Reply to this Comment

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.

Reply to this Comment

@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" ), "*" )

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.