Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaS

M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaScript 1 Ana ROXIN Page 1 1 Construire des expressions régulières en JavaScript Il existe deux façons de construire des d’expressions régulières en JavaScript :  La première d’entre elles, vue dans les exemples, consiste à utiliser une variable littérale RegExp contenant le motif. Avec cette méthode, il est possible d’utiliser les étiquettes g, i et m, en les plaçant directement à la fin de la variable RegExp. Le tableau ci-dessous précise comment ces étiquettes sont interprétées. Etiquette Interprétation g Global / glouton – correspondance effectuée plusieurs fois i Insensible – la casse des caractères est ignorée m Multi-lignes - ^ et $ permettent d’identifier les caractères de fin de ligne // Expression régulière pour identifier une chaîne de caractères JavaScript. var mon_regexp = /"(?:\\.|[^\\\"])*"/g;  La deuxième méthode repose sur l’utilisation du constructeur RegExp. Ce constructeur prend en entrée deux paramètres, puis les compile en un objet RegExp. Le premier paramètre est une chaîne de caractères. Il convient d’être prudent lors de la construction de la chaîne de caractères, car le caractère « \ » a une signification différente au sein d’un objet RegExp et au sein d’une variable littérale. Il est généralement nécessaire de doubler les backslashes et déspécifier les guillemets. Le deuxième paramètre est une chaîne de caractères précisant l’étiquette à utiliser. Cette méthode est utile lorsque l’expression régulière doit être générée à l’exécution, en utilisant des ressources qui ne sont pas disponibles pour le programmeur. Les propriétés d’un objet RegExp sont données dans le tableau ci-dessous. Propriété objet RegExp Utilisation global Vrai si l’étiquette ‘g’ a été utilisée. ignoreCase Vrai si l’étiquette ‘i’ a été utilisée. multiline Vrai si l’étiquette ‘m’ a été utilisée. lastIndex Valeur de l’index à partir du quel commencer la prochaine correspondance exec. Par défaut, il vaut 0. source Le texte source de l’expression régulière. // Expression régulière pour identifier une chaîne de caractères JavaScript. var mon_regexp = new RegExp("\"(?:\\.|[^\\\\\\\"])*\"", 'g'); M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaScript 2 Ana ROXIN Page 2 2 Les méthodes Les expressions régulières sont utilisées avec des méthodes pour chercher, remplacer et extraire des informations à partir de chaînes de caractères. Les méthodes suivantes s’appliquent en JavaScript : Nom méthode Description regexp.exec(string) Ceci est la méthode la plus puissante (mais aussi la plus lente) : si regexp et string correspondent, la méthode retourne un tableau. L’élément 0 du tableau contient la sous-chaîne qui correspond à regexp. L’élément 1 représente le texte capturé par le 1er groupe, etc. S’il n’y a pas de correspondance, cela retourne null. regexp.test(string) C’est la méthode la plus simple (et la plus rapide). Si regexp correspond à string, cela retourne vrai ; sinon faux. En règle générale, les meilleures expressions régulières sont courtes et simples. Celles qui sont plus compliquées ont plus de chances d’avoir des problèmes de portabilité. Les expressions régulières imbriquées connaissent des performances limitées dans certaines implémentations. La simplicité est la meilleure stratégie. 2.1 Exemple 1 – identification d’URLs (méthode exec) Soit l’expression régulière suivante qui identifie les URLs : var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+) (?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/; Nous allons utiliser la méthode exec de cette expression régulière avec la variable suivante : var url = “http://www.ora.com:80/goodparts?q#fragment”; Si la variable url correspond à l’expression régulière définie dans parse_url, alors cela retournera un tableau contenant des éléments extraits à partir de la chaîne de caractères initiale (url). Considérons le code suivant : var url = "http://www.ora.com:80/goodparts?q#fragment"; var result = parse_url.exec(url); var names = ['url','scheme','slash','host','port','path','query','hash']; var blanks = ' '; var i; for (i = 0; i < names.length; i += 1) { document.writeln(names[i] + ':' + blanks.substring(names[i].length), result[i]); } Ce code produit le résultat suivant: url: http://www.ora.com:80/goodparts?q#fragment scheme: http slash: // host: www.ora.com port: 80 path: goodparts query: q hash: fragment La figure suivante illustre les traitements effectués par le motif défini dans parse_url : M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaScript 3 Ana ROXIN Page 3 Afin de mieux comprendre les résultats, étudions le motif parse_url : Partie étudiée Explication ^ Début de chaîne (?:([A-Za-z]+):) Permet d’identifier un nom de schéma, seulement si suivi de « : ». ( ?:…) précise qu’il s’agit d’un regroupement non-mémorisant. « ? » en suffixe précise que la présence de ce groupe est optionnelle. Par contre ([A-Za-z]+) est un groupement mémorisant et le texte identifié par ce groupe sera contenu dans result[1]. (\/{0,3}) C’est le 2e groupement mémorisant. Il cherche à identifier le caractère « / » (déspécifié avec « \ ») répété 0, 1, 2 ou 3 fois. ([0-9.\-A-Za-z]+) Ce 3e groupement mémorisant permet d’identifier un nom d’hôte, qui est composé d’un ou plusieurs chiffres, lettres, le caractère « . » ou « - » (ici déspécifié). (?::(\d+))? Ce 4e groupement mémorisant identifie (optionnellementà le numéro de port, cest-à- dire une séquence d’un ou plusieurs chiffres précédés par le caractère « : ». (?:\/([^?#]*))? C’est un autre groupement optionnel, qui débute avec le caractère « / » et qui contient le groupement mémorisant 5. La classe de caractères [^ ?#] correspond à tous les caractères1 sauf « ? » et « # ». Ces caractères sont indentifiés 0 ou plusieurs fois (caractère *). 1 Cette classe contient aussi des caractères tels que la fin de ligne ou des caractères de contrôle qui ne devraient pas être identifiés ici. En pratique, il faudrait mieux spécifier cette classe, afin d’éviter les erreurs. En effet, les expressions régulières mal écrites sont une source fréquente d’erreurs de sécurité. M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaScript 4 Ana ROXIN Page 4 (?:\?([^#]*))? Il s’agit d’un autre groupement non-mémorisant débutant avec le caractère « ? » et contenant la mémorisation 6 (contient 0 ou plusieurs caractères qui ne sont pas des « # »). (?:#(.*))? Dernier groupement optionnel, qui débute avec un « # » et qui contient le groupement mémorisant 7 (tout caractère sauf la fin de ligne) $ Fin de la chaîne 2.2 Exemple 2 – identification de nombres (méthode test) Considérons l’exemple de l’expression régulière suivante qui permet d’identifier des nombres sous différentes formes : entiers signés ou pas, avec partie décimale ou sans, avec exposant ou pas. Soit le code suivant : var parse_number = /^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i; var test = function (num) { document.writeln(parse_number.test(num)); }; Ce code produit le résultat suivant: test('1'); // true test('number'); // false test('98.6'); // true test('132.21.86.100'); // false test('123.45E-67'); // true test('123.45D-67'); // false La figure suivante illustre les traitements effectués par le motif défini dans parse_number : Afin de mieux comprendre les résultats, étudions le motif parse_number : Partie étudiée Explication /^…$/i Nous utilisons ^ et $ pour ancrer notre motif. Cela permet de considérer tous les caractères dans le texte pour l’opération de correspondance. Sans ces ancres, l’expression régulière nous indiquera seulement si le texte contient un nombre. Avec les ancres, elle indique si le texte contient seulement un nombre. L’étiquette i à la fin M1 Multimédia – Semestre Printemps 2017 TP4 – Expressions régulières avec JavaScript 5 Ana ROXIN Page 5 permet d’être insensible à la casse, et donc d’identifier à la fois le caractère « e » et « E ». Cela nous permet d’éviter les syntaxes suivantes [Ee] ou ( ?:E|e) -? Spécifie que le signe « -« est optionnel. \d+ Un ou plusieurs chiffres. (?:\.\d*)? On utilise un groupement non-mémorisant afin d’améliorer les performances. Ceci permet d’identifier un séparateur décimal (ici le caractète « . ») suivi par 0 ou plusieurs chiffres. (?::(\d+))? Ce 4e groupement mémorisant identifie (optionnellementà le numéro de port, cest-à- dire une séquence d’un ou plusieurs chiffres précédés par le caractère « : ». (?:e[+\-]?\d+)? C’est un autre groupement optionnel, qui identifie le caractère « e » ou « E », un signe optionnel et un ou plusieurs chiffres. 3 Autres exemples 3.1 Les objets RegExp créés par des expressions régulières partagent une même instance function test() { return /a/gi; } var x = test(); var y = test(); // x et y sont le même objet x.lastIndex = 10; document.writeln(y.lastIndex); // 10 3.2 Méthode exec - manipulation du tableau de résultats (1) var re = new RegExp("JS*", "ig"); var str = "cfdsJS *(&YJSjs 888JS"; var resultArray = re.exec(str); while (resultArray) { document.writeln(resultArray[0]); document.writeln(" prochaine correspondance débute à "+re.lastIndex+"<br />"); resultArray = re.exec(str); } Le motif recherché ici est formé du caractère « J » suivi de 0 ou plusieurs fois le caractère « S ». En utilisant l’étiquette ‘i’, la casse est ignorée. En utilisant l’étiquette ‘g’, la propriété lastIndex de l’objet RegExp est définie sur la valeur de l’index où a été trouvé le dernier motif, pour chaque appel successif. De cette manière, chaque nouvel appel à la méthode exec permet de trouver le prochain motif. On affiche donc les 4 éléments trouvés, puis lorsqu’on n’en trouve plus, la valeur null est définie pour le tableau de résultats. Ceci permet de sortir de la boucle. Voici la sortie du programme : JS prochaine correspondance débute uploads/s3/ td5-expr-reg-js.pdf