Les expressions régulières avec Actionscript 3

Date de publication : 21/03/2007

Les expressions régulières sont une manière puissante et rapide de vérifier, rechercher et manipuler des chaînes de caractères dans un fichier, un texte, un paragraphe, du code ... et j'en passe. Elles sont basées sur une syntaxe assez particulière que nous allons appréhender de manière progressive pour arriver à réaliser un éditeur Wiki.

Après cet apprentissage, vous ne pourrez plus vous en passer...

Version PDF (Miroir)

I. Utiliser la classe RegExp
II. Construire une expression régulière
III. Recherche de chaines
IV. Les classes de caractères
V. Début et fin d'une chaîne
VI. Les quantifieurs
VII. Le caractère spécial . (point)
VIII. Sous chaines de caractères
IX. Exemple : Un éditeur wiki en Flex 2

I. Utiliser la classe RegExp

La classe RegExp nous permet de créer une expression régulière de manière classique avec son constructeur :

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

ou de manière littérale :

var pattern:Regxp = /as3/;
// remarquer l'utilisation du slash pour délimiter le modèle d'expression.

Nous pouvons passer des options de comportement:

g indique une recherche globale sur la chaîne de caractère et indique une recherche de toutes les occurences.
i indique une recherche non sensible à la casse

Nous passons les options par la fonction constructeur de RegExp de la manière suivante :

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

ou directement dans la syntaxe littérale :

var pattern:RegExp = /as3/i; 
// remarquer l'utilisation de l'option i après le dernier slash

Nous utiliserons par simplicité la version littérale pour le reste du tutorial.

II. Construire une expression régulière

Les expressions régulières sont construire à l'aide de caractères spéciaux :

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

pour rechercher un caractère faisant parti des caractères spéciaux, il faut utiliser le symbole '\' (sauf entre les crochets).

Voici une petite application pour nous permettre de tester les expressions de ce tutorial :

III. Recherche de chaines

Nous pouvons rechercher une chaîne de caractère de la manière suivante :

// Chaine contenant la chaine 'as3'
/as3/
exemple: Formation AS3 sur Flex Builder 2

A l'aide du symbole | (OU), nous proposons de multiples choix :

// Chaine contenant soit la chaine as2 ou as3
/as2|as3/
exemple: Aujourd'hui formation en AS2

IV. Les classes de caractères

L'utilisation de classes de caractères permettent que l'une des lettres entre les crochets peut convenir :

/[a-z]/i

Quelques classes de caractères :

[a-z] un caractère minuscule compris entre a et z
[A-Z] un caractère majuscule compris entre A et Z
[0-9] un nombre compris entre 0-9
[a-zA-Z0-9] l'union des trois précédentes classes

Voici un exemple ou nous recherchons les mots gras, gros et gris:

/gr[aio]s/

V. Début et fin d'une chaîne

Nous pouvons à l'aide des expressions régulières verifier si une chaine de caractères commence par un caractère ou un mot spécifique en utilisant le caractère '^' :

// La chaine de caractere commence par une majuscule
/^[A-Z]/
exemple: Apollo

// La chaine commence par Bonjour
/^Bonjour/
exemple: Bonjour je suis content de vous connaitre.

mais encore de savoir si une phrase fini par un point avec l'emploi du caractère '$':

/\.$/
exemple: Il fait beau aujourd'hui.

Nous pouvons aussi rejeter une classe de caractères en utilisant le caractère '^' à l'interieur des crochets :

Un caractère autre qu'un chiffre
/[^0-9]/
exemple: Cette phrase ne contient pas de chiffre.

VI. Les quantifieurs

Nous trouvons les caractères spéciaux *, + et ? pour quantifier un caractère:

* : zéro ou plusieurs
+ : un ou plusieurs
? : zéro ou un caractère

// Chaine qui contient bl suivi de zero ou plusieurs 'a'
/bla*/
exemple: bl, bla, blaaa, blaaaaaaa

// Chaine qui contient bl suivi de un ou plusieurs 'a'
/bla+/
exemple: bla, blaaaaaa

// Chaine qui contient un ou aucun 'a'
/bla?/
exemple: bl, bla

Nous pouvons controler le nombre de caractère consecutif en utilisant les accolades:

// Chaine qui contient 2 caractère 'o' consecutif
/o{2}/
exemple: booum

// Chaine qui contient 2, 3 ou 4 'o' consecutif
/o{2,4}/
exemple: boooum

// Chaine qui contient 4 caractère 'o' ou plus
/o{2,}
exemple: boooooum

VII. Le caractère spécial . (point)

L'utilisation du point permet de rechercher tout type de caracère:

// Tous les caractères
/.*/

// Vérifier qu'une phrase commence par une majuscule et fin par un point
/^[A-Z].*\.$/
exemple: Nous allons sur Paris, aujourd'hui. // true
         nous allons sur Paris, aujourd'hui. // false
         Nous allons sur Paris, aujourd'hui // false

VIII. Sous chaines de caractères

L'utilisation des parenthèses permettent de réaliser des sous resultats à une expression régulère. Donc a chaque parenthèse correspond un resultat, voici un exemple :

// Cette expression permet de verifier la syntaxe de balise h1
/<h1>(.+)</h1>/

L'emploi des parenthèses n'est pas forcèment utile sauf dans le cas d'un remplacement avec la méthode replace de String. Supposons un instant que nous voulions remplacer la balise par une autre syntaxe :

IX. Exemple : Un éditeur wiki en Flex 2

Définissons, le code de mise en page que nous utiliserons :

__text__ : gras
''text'' : italique
?text? : surligné

Nous allons devoir dériver le controle TextArea de manière a disposer de fonctionnalités de selection et de replacement beaucoup plus simple que ce que nous propose le controle TextArea :

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 {
                        // Propriete cachee et non documentee, qui permet simplement
                        // de retourner la selection.
			return textField.selectedText;
		}
	}
}

Le fait d'heriter de TextArea, nous permet d'acceder à la propriété protégée textField qui nous apporte plus de fonctionnalités comme vous avez pu le constater dans le code précédent.

Voici maintenant le code de notre application integrant le controle SuperTextArea :


<?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>
                <!-- Utilisation du controle SuperTextArea -->
		<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="Visualiser :"/>
	</mx:Panel>
	<mx:Script>
		<![CDATA[
			// La fonction parseSelection est appelee lorsque vous cliquez sur l'un des boutons
                        // de mise en page avec un code différent.
			private function parseSelection(code:String):void{
				input.replaceText(code + input.selectedText() + code);
			}
		]]>
	</mx:Script>
</mx:Application>

Il nous reste a faire la fonction qui transformera la mise en page wiki en code html.

Pour cela, nous allons utiliser le principe des sous-chaînes en construisant les expressions régulières correspondantes :

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

ce qui nous permet de faire la mise en page en 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>");
}

Nous continuerons dans un autre tutorial pour mettre en page les liens et les images.

En attendant voici le code source de ce tutorial : Application (Miroir)

Version PDF (Miroir)

Retrouvez cet article et d'autres sur http://iteratif.developpez.com ou bien sur mon blog : http://www.iteratif.fr/blog

Copyright © 2007 Olivier Bugalotto. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.