Article written on 07/03/2007 12:07.
By iteratif ( Bugalotto Olivier ).

Regular expressions are a powerful and quick way to check, search and manipulate character strings in a file, text, paragraph, code etc. They are based on a quite particular syntax which we are going to progressively study to create a Wiki editor.

After this tutorial you will not be able to avoid them! :)

But let’s start from the beginning…

The RegExp class allows us to create a regular expression in the traditional manner with its constructor:

var pattern:RegExp = new RegExp("as3");

or quite literally:

var pattern:Regxp = /as3/;
// note: the use of a slash to delimit the expression

We can have many ‘modifying’ options:

• g indicates a global search on a character string and indicates a search of all occurrences.

• i indicates a case-insensitive search

Let’s go to the constructor function options of RegExp:

var pattern:RegExp = new RegExp("as3","i");

Or directly in the literal syntax:

var pattern:RegExp = /as3/i; 
// note the use of the option i after the last slash

For simplicity we use the literal version for the rest of the tutorial.

Construction of a regular expression…

This is done using special characters:

\.$(){}^?*+-

To search for one of these special characters you need to use the symbol '\' (between square brackets).

Here is a small application to test the expressions in this tutorial:

Applying regular expressions

We can search a character string in the following way :

// String containing the ‘AS3’ string
/"/
// example: AS3 tutorial on Flex Builder 2

With the help of the | symbol (OR), we propose multiple choices:

// String contains either the AS2 or AS3 string
/as2|as3/
// example: Today tutorial in AS2

The use of character classes allow the option of one of the characters in the brackets to match:

/[a-z]/i

Various character classes:

• [a-z] a lower-case character between a and z
• [A-Z] an upper-case character between A and Z
• [0-9] a number between 0-9
• [a-zA-Z0-9] a combination of the 3 previous classes

Here is an example where we are looking for a make, fake, rake:

/[mfr]ake/

With the help of regular expressions we can check if a character string starts with a character or specific word by using the character '^':

// The character string starts with an upper-case character
/^[A-Z]/
// example: Apollo

// The string starts with Hello
/^Hello/
// example: Hello I am happy to meet you.

Also we can see if a phrase finishes with a full stop by using the character '$':

/\.$/
// example: The weather is lovely today.

We can also reject a character class by using the character '^' inside square brackets:

// A character other than a number
/[^0-9]/
// example: This phrase doesn’t contain any numbers.

We have special characters *, + and ? to quantify a character:

• * : zero or many
• + : one or many
• ? : zero or a character

// String contains bl followed by zero or many ‘a’s
/bla*/
// example: bl, bla, blaaa, blaaaaaaa

// String contains bl followed by one or many 'a's
/bla+/
// example: bla, blaaaaaa

// String contains one or no 'a's
/bla?/
// example: bl, bla

We can control the number of consecutive characters by using curly brackets:

// String contains 2 consecutive ‘o’s
/o{2}/
// example: boom

// Sring contains 2, 3 or 4 consecutive ‘o’s
/o{2,4}/
// example: booom

// String contains 2 or more consecutive ‘o’s
/o{2,}
// example: booooom

The use of a full stop allows you to search for any type of character:

// All characters
/.*/

// Check that a phrase starts with a upper-case character and finishes with a full stop/period
/^[A-Z].*\.$/
// example: We are going to Paris today. -> true
//         we are going to Paris today. -> false
//         We are going to Paris today -> false

The use of brackets allows us to create sub-results for a regular expression. So each bracket corresponds to a result:

// This expression allows us to verify the h1 syntax tag
/<h1>(.+)</h1>/

The use of brackets is not necessarily useful apart from in the case of a replacement with the replace method of the String. Let’s say that we want to replace the tag with another syntax:

Let’s define the layout code that we will use:

• __text__ : bold
• ''text'' : italic
• ?text? : underlined

We are going to have to modify the TextArea control in a way which manages search and replace functionality in a much simpler way than that which is proposed by the standard TextArea control:

package net.iteratif.controls
{
	import mx.controls.TextArea;
 
	public class SuperTextArea extends TextArea
	{
		public function SuperTextArea()
		{
			super();
		}
 
		public function replaceText(newText:String):void {
			var startIndex:int = textField.selectionBeginIndex;
			var endIndex:int = textField.selectionEndIndex;
			textField.replaceText(startIndex,endIndex,newText);
                        text = textField.text;
		}
 
		public function selectedText():String {
                        // Hidden and non-documented property which allows you
                        // to return the current selection.
			return textField.selectedText;
		}
	}
}

Using inheritance, the TextArea can access the protected textField property which gives us access to more functionality as you probably noticed in the previous code.

Here is our application’s code with the integration of the SuperTextArea control:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:it="net.iteratif.controls.*">
	<mx:Panel width="356" height="350" layout="vertical" title="WikiParser"
               paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
		<mx:HBox>
			<mx:Button click="parseSelection('__')" width="20" height="20"/>
			<mx:Button click="parseSelection('\'\'')" width="20" height="20"/>
			<mx:Button click="parseSelection('?')" width="20" height="20"/>
		</mx:HBox>
                <!—Use of SuperTextArea control -->
		<it:SuperTextArea width="100%" height="100%" id="input"/>
		<mx:Button label="Parser" click="parseContent()" width="100%"/>
		<mx:Text width="100%" height="100%" id="output" text="Visualise:"/>
	</mx:Panel>
	<mx:Script>
		<![CDATA[
			// The parseSelection function is called when you click on one of 
                        // the layout buttons with a different code.
			private function parseSelection(code:String):void{
				input.replaceText(code + input.selectedText() + code);
			}
		]]>
	</mx:Script>
 
</mx:Application>

We just need to do the function which will transform the wiki layout into html code. To do this we will use the sub-string principal by building corresponding regular expressions:

• __text__ : /(.+)/g
• ''text'' : /(.+)/g
• ?text? : /\?(.+)\?/g

which allows us to do the layout in html:

private function parseSelection(code:String):void{
	input.replaceText(code + input.selectedText() + code);
}
 
private function parseContent():void {
	var result:String = input.text;
	result = parseBold(result);
	result = parseItalic(result);
	result = parseUnderline(result);		
	output.htmlText = result;
}
 
private function parseBold(value:String):String {
	return value.replace(/__(.+)__/g,"<b>$1</b>");
}
 
private function parseItalic(value:String):String {
	return value.replace(/''(.+)''/g,"<i>$1</i>");
}
 
private function parseUnderline(value:String):String {
	return value.replace(/\?(.+)\?/g,"<u>$1</u>");
}

We will continue this in another tutorial to add links and images.

Meanwhile here is the source code to this tutorial: WikiEditor.zip

By ITERATIF - BUGALOTTO Olivier (2007). You can find this tutorial and its comments on my blog