Tag

regex

Browsing

Il peut arriver que l’on ait besoin de sélectionner un élément dont l’ID ou la classe commence ou finit par un nom défini, pour pouvoir le modifier ou le manipuler.

Évidemment, si il possède un ID ou une classe bien défini, on utilisera son ID ou sa classe. Par contre, si aucune classe n’est définie par exemple, il faudra utiliser une expression régulière (regex).

On peut faire cela très simplement avec jQuery.

Sélectionner tous les éléments dont l’ID commence par toto_

Prenons un petit exemple, nous allons chercher à sélectionner tous les élements dont l’ID commence par toto_:

jQuery('[id^=toto_')

Le signe ^ signifie que l’on se place en début de chaîne dans l’expression régulière. Ensuite, il suffit d’indiquer la chaîne à chercher, c’est-à-dire toto_ dans notre cas.

S’il s’agit d’un champs de formulaire <input>, on trouvera donc:

<input id="toto_01" type="number" />
<input id="toto_02" type="number" />
<input id="toto_03" type="number" />

Sélectionner tous les éléments dont l’ID finit par _toto

Cherchons maintenant à sélectionner tous les éléments dont l’ID finit par _toto:

jQuery('[id$=_toto')

Cette fois, on utilise l’argument $, qui signifie la fin d’une chaîne de caractères.

Exemple concret : remplacer le type de tous les champs de formulaire dont l’ID finit par -money

J’ai récemment eu à modifier le comportement d’une page de réglages d’un plugin pour WooCommerce.

En substance, les champs étaient de type number, ce qui est problématique car ils ne permettent que des nombres entiers. Or, s’agissant d’un système de conversion de devises, il était primordial d’avoir accès à des nombres flottants, avec des virgules.

La solution est de cibler tous les champs finissant par -moneyet d’en changer le type de number à text, ce qui se fait très facilement avec la requête suivante:

jQuery('[id$=-money]').attr('type', 'text');

Et si l’on veut cibler les classes?

Dans les exemples précédents, il suffit de remplacer le mot id par le mot class.

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#

et on remplace par :

https://www.dailymotion.com/video/$2

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#

et on remplace par :

https://www.dailymotion.com/video/$2

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtubeSur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

#(.*)#

Et on remplace par :

https://www.youtube.com/watch?v=$2

Il peut être très utile d’avoir sous la main un petit utilitaire qui permet de renommer des fichiers en masse facilement. Sous Linux, j’utilise l’outil Thunar Bulk Renamer (Thunar Renommer en masse en français) qui ressemble à ceci :

thunar-bulk-renamer

Thunar Renommer en masse

Thunar est un gestionnaire de fichiers puissant pour XFCE, dont les fonctions peuvent être étendues à l’aide de plugins.

Renommer en masse est un plugin qui permet de renommer toute une liste de fichiers très facilement, avec une interface simple et intuitive. Il permet de :

  • insérer et remplacer des noms de fichiers
  • insérer diverses manières de numéroter
  • rechercher, remplacer, supprimer des caractères
  • changer la casse

Installation de Thunar

Pour installer Thunar, il suffit de lancer :

sudo apt-get install thunar

Le raccourci vers l’application Thunar Bulk Renamer se trouve dans Applications > Outils Système > Renommer en masse.

Si le raccourci n’est pas créé, il suffit d’ajouter un nouveau raccourci sur le tableau de bord comme ceci :

  1. clic droit sur le tableau de bord > ajouter au tableau de bord > lanceur d’application personnalisé
  2. entrez la commande suivante :
    thunar --bulk-rename

    thunar-bulk-renamer-lanceur

  3. choisissez une icône (engrampa.svg m’a semblée adéquate!) et validez.

Thunar Renommer en masse supporte aussi les expressions régulières (regex), c’est un vrai plaisir à utiliser (voir copie d’écran). Un vrai gain de temps également.

Et vous, qu’est-ce que vous utilisez pour renommer vos fichiers ?

Il y a quelques mois, je vous ai montré comment changer la structure des permaliens WordPress. Cela fonctionne très bien et tout le trafic des anciennes URL est bien redirigé vers les nouvelles.

Il est toutefois encore possible de faire mieux que cela : éditer toutes les URL de la base de données pour afficher les bons liens directement et éviter les redirections Apache à chaque fois qu’un visiteur clique sur un lien de vos anciens articles. Cela évite une redirection donc permet d’afficher la bonne page directement, sans le temps de latence dû à l’exécution de mod_rewrite.

Etape 1 : sauvegarder votre base de données

On n’insistera jamais assez sur l’importance de sauvegarder les données avant d’effectuer une quelconque manipulation des données. Commancez donc par faire une sauvegarde de votre base WordPress, vu que nous allons l’éditer en direct.