Discussion :

[almoha]

Bonjour,

Débutant en matière de REGEX, je souhaiterais comprendre les mécanismes de la REGEX suivante (qui a pour effet de mettre en surbrillance les caractères recherchés dans une chaîne) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var string ="écouteur";
 
string = string.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(écoute)(?![^<>]*>)(?![^&;]+;)", "gi"),
"<span style='color:#8F5935;font-weight:bold;'>$1</span>");

Avec ce code, les caractères “écoute” de la chaîne “écouteur” sont mis en surbrillance.
J’ai du mal à comprendre la syntaxe de la REGEX (en mode objet si j’ai bien compris). Cette syntaxe avec le mot recherché entre parenthèses, encadré par des patterns elles-mêmes entre parenthèses, est-elle habituelle ? Que fait exactement cette REGEX ? Que donnerait-elle en mode littéral ? Je souhaite y voir clair car mon objectif est de modifier la REGEX pour la rendre insensible aux accents (pour le moment , si je recherche le mot “ecouteur”, la chaîne string n’est pas surlignée à cause de l’accent sur le e ). D’ailleurs, si vous avez une piste sur le sujet, je suis preneur. Merci d’avance de votre aide.

[Watilin]

Aaah la gestion des accents avec les Regexp, quel bonheur…

… Oui, c'est de l'ironie. Les regexp n'ont de raccourcis que pour l'ASCII, donc pour les accents, il faut tout faire à la main. Il y a d'ailleurs une conversation sur le sujet qui a été plusieurs fois resortie, je réponds à tes autres questions et j'essaye de la retrouver

D'abord le plus facile.

Que donnerait-elle en mode littéral ?

En mode littéral, ta regexp devient ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/(?![^&;]+;)(?!<[^<>]*)(écoute)(?![^<>]*>)(?![^&;]+;)/gi

Tu admettras que c'est pas beaucoup plus clair

Cette syntaxe avec le mot recherché entre parenthèses, encadré par des patterns elles-mêmes entre parenthèses, est-elle habituelle ?

Non, mais chaque pattern est unique. Toutefois, je connais cette syntaxe et je m'en suis déjà servi.

Que fait exactement cette REGEX ?

Il y a une chose à savoir à propos des parenthèses dans les regexp, c'est qu'elles peuvent être capturantes ou non capturantes. Par défaut, elles sont capturantes, c'est le cas du groupe (écoute) dans ton exemple. Les parenthèses capturantes permettent de garder une référence sur une portion de texte intéressante. Cette référence est ajoutée au tableau de résultat quand on utilise match, par exemple :

Code console :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
>>> "abc".match(/a(b)c/);
["abc", "b"]

Utilisées avec replace, les parenthèses capturantes permettent de réutiliser les bouts de texte mémorisés, avec le symbole dollar. C'est comme ça que le "$1" est remplacé par "écoute" dans ton exemple.

Pour comprendre ce que fait le reste de la regexp, séparons les différents groupes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
a. (?![^&;]+;)
b. (?!<[^<>]*)
c. (écoute)
d. (?![^<>]*>)
e. (?![^&;]+;)

Voilà une construction bizarre : (?! ... ). C'est une assertion négative. Les assertions (en anglais lookahead, littéralement « regarder en avant ») sont des bouts de regexp qui ne sont pas gardés dans le résultat. Par exemple, /a(?!b)/ signifie « "a" non suivi de "b" ». Si tu donnes la chaîne "ac" à cette regexp, elle te renverra simplement "a".
Donc, le groupe a. signifie :

Quelque chose qui n'est pas : la plus longue chaîne possible contenant au moins un carctère et ne contenant pas "&" ou ";", suivie de ";"

J'imagine que ce groupe permet de vérifier que la portion de texte analysée ne fait pas partie d'une entité HTML comme  .

Une fois qu'une assertion a été vérifiée, elle est complètement oubliée par le moteur de regexp. Celui-ci revient en arrière, à l'endroit où il était quand il a commencé l'assertion. On dit parfois que les assertions ont une longueur 0. Ainsi, le moteur va rembobiner tout ce qu'il a lu pendant le groupe a. avant de vérifier le groupe b.
Le groupe b., quant à lui, signfie :

Quelque chose qui n'est pas : "<" suivi de la plus longue chaîne possible ne contenant pas "<" ou ">"

Ce groupe vérifie qu'on n'est pas dans une balise HTML fraîchement ouverte.

Ensuite, on rembobine à nouveau et on arrive au groupe c. : on regarde si la portion analysée correspond au texte à mettre en surbrillance.

Vient le groupe d., qui fait l'inverse de b. : il regarde s'il n'y a pas une fermeture de balise après le mot-clé.

Enfin, le groupe e. fait la même chose que a., après le mot-clé.

Pour résumer, cette regexp trouve le mot-clé recherché dans une portion de texte non HTML, c'est-à-dire pas dans une balise et pas dans une entité.


Voilà la conversation moultes fois ressassée à propos des accents :
http://www.developpez.net/forums/d11...js-navigateur/

[almoha]

Merci beaucoup pour ces explications aussi claires que complètes Excellent.