Notice: wp_add_privacy_policy_content est appelée de la mauvaise manière. The suggested privacy policy content should be added only in wp-admin by using the admin_init (or later) action. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 4.9.7.) in /home/xavierbs/www/_blog/wp-includes/functions.php on line 4161
Replace avec callback et regex pour cibler la « nth » occurrence trouvée en javaScript - Murviel Info

Replace avec callback et regex pour cibler la « nth » occurrence trouvée en javaScript

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Lorsque l’on veut remplacer la nième occurrence d’un motif de sous-chaîne dans une chaîne de caractères en JavaScript, on utilise la fonction replace(). Cette fonction est attachée à l’objet String.

Prenons l’exemple suivant : on dispose d’une table HTML, et l’on veut ajouter à certaines cellules une classe pour spécifier le type numérique des données.

Un tableau HTML
Différents types de données dans une table

Les données « Poids » et « Nombres d’heures » sont de type numérique. On veut donc ajouter une classe numeric à ces données.

Le code HTML générant le tableau est le suivant :

Ce code peut être considéré comme chaîne de caractères lorsqu’on le récupère avec JavaScript ou jQuery. Il s’agit donc d’ajouter une classe aux balises th et td des données numériques des colonnes « Poids » et « Nombre d’heures ».

On place la chaîne de caractères dans une variable table. Les indices à changer sont, dans cet exemple, le troisième et le cinquième.

L’expression régulière pour cibler toutes les lignes th et td est :

et ensuite, lorsque l’on a extrait ces lignes, l’expression régulière pour isoler les différents endroits permettant de faire le remplacement est :

Le nombre d’items est 5 (nb_items = 5) et l’index est 3 ou 5. On initialise le compteur i à 0 ( var i = 0)

L’instruction permettant d’ajouter la classe est, avec l’emploi de la fonction replace() :

Lorsque l’index est égal à 3 ou 5, on effectue l’ajout de class="numeric" .

Pour enlever cette classe, on a :

Le code complet, en ayant stocké les index dans des cases à cocher, est:

Ce code est celui que j’utilise dans mon générateur de tableaux HTML responsives.

On peut bien-sûr utiliser, dans ce cas, la fonction split() de javaScript. On isole chaque ligne en « splitant » par le caractère de fin de ligne \n. Mais bon, c’était aussi un bon exercice sur les expressions régulières.

Plusieurs sites proposent de tester les regex sur des chaines de caractère: regex101.com est plus adapté au javaScript, et phpliveregex.com pour le PHP. J’ai fait aussi mon propre testeur sur murviel-info.com/regex.php., mais il y a encore du travail pour le rendre performant sur des chaines très longues. Et l’on peut trouver un excellent cours sur les expressions régulières sur openClassRooms.

Et hop, on peut cibler des éléments précis d’une chaîne, afin d’effectuer des remplacements. Et ceci montre encore la puissance des expressions régulières dans les traitements sur les chaînes de caractères.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *