Using Methods in Javascript Replace Method
Posted May 15, 2006 at 8:14 AM by Ben Nadel
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() );
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.
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).
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!
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.
do you know how to replace the vowels by asterisk?
example i input a word "beta" then the ouput is "b*t*"
@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" ), "*" )
