Using parenthetical groups of RegExp in the String.replace method

Jan 20

Using parenthetical groups of RegExp in the String.replace method

I was used to replace strings by a hardcoded string (or just "" to remove something) or a variable. But sometimes this was not enough, so I started complex treatments of the strings and substrings… often only to get headaches and bugs.

Yesterday, I wanted to clean an HTML string and reuse the value of an attribute to inject it in the new string. I was really not happy at all with the idea of doing the same heavy treatments as in previous works, so I opened the Flex Language Reference and read… This is usually a good thing … to read something totally. And there, I just found the Scrat the Saber-Toothed Squirrel ’s acorn… or I just felt like Scrat catching its treasure ;).

So here is my case. I have

<TextFormat leftMargin="20"><p>my text is indented</p></TextFormat>

and I want to get

<p style="margin-left: 20px;">my text is indented</p>

with the main challenge being to reuse the value of the leftMargin attribute of the TextFormat tag. This value may vary in the main HTML source…

With a RegExp and parenthetical groups, this may be easily (and magically) transformed. Parenthetical groups are actually regular expressions between parentheses. They can be referenced during the replace process using their position in the RegExp.

Let’s first cut the string in groups:

<TextFormat leftMargin="(20)("><p)>(my text is indented</p>)(</TextFormat>)

I define 4 groups:

20 is the value to be reused
to be removed
The text itself to maintain and the closing p tag
The closing TextFormat tag, to drop

Other slightly different groupings are possible of course. This could be translated in RegExp syntax as follow:

var myRegExp:RegExp = /<TextFormat leftMargin="(\d+)(.*<p)>(.*)(<\/TextFormat>)/;

To reference a parenthetical group in the replacing string, you use the syntax $n. n being the number of the group in the RegExp. So I don’t want the group 2 and 4 so I won’t reuse them, but I want to keep the groups 1 and 3 to define the replacing string.

var myString:String = myHtml.replace( myRegExp, '<p style="margin-left: $1px;">$3' );

Done !

I really love this solution and I need now to update some previous works with it. You can also use a function as the replacing string. In this function, the parenthetcal groups are referenced using arguments[n]. In this case and for complex groupings, I would advise you to check the value of each arguments to insure you use the right one.

Other possible applications:

Change the display of a contact name according to user preferences:
- Arnaud FOUCAL -> FOUCAL, Arnaud
- RegExp: /([A-Z][a-z]+) ([A-Z]+)/
- Replacing string: “$2, $1″
Format dates:
- Wednesday, 20th of january 2010 -> 01/20/2010
- RegExp: /[A-Z][a-z]+, (\d+)(st|nd|rd|th)? of (\w+) (\d{4})/ (for example)
- Replacing function:

private function formatDate():String
{
	var quarterMonths:Array = ['january', 'february', 'march', 'april' ];
	var monthNumber:Array = [ '01', '02', '03', '04' ];
	var monthIndex:int = quarterMonths.indexOf( arguments[3] );
 
	return monthNumber[monthIndex] + '/' + arguments[1] + '/' + arguments[4];
}

Have fun

Update 21/01/2010: I just found today that groups can be named ! I really love to discover this kind of little things that make coding easier or smarter