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
Plugin jQuery: Encadrer de <span> les lignes obtenues par line wrap - Murviel Info

Plugin jQuery: Encadrer de <span> les lignes obtenues par line wrap

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

Encadrer chaque ligne par un span
Encadrer chaque ligne par un span

Lorsque l’on écrit de longues lignes dans un paragraphe ou une div, il y a plusieurs retours à la ligne (line wrap en anglais). Si l’on veut mettre en forme chaque ligne de façon différente, il faut les encadrer (wrapper en anglais) par des <span>. Ex:

Un long texte avec des retours à la ligne:

Tantôt c’est la dernière fois… Pouvais-je renoncer à cette cure. Ivre d’orgueil et de plaisir, ce séjour à la ferme, à l’industrie et du commerce de détail sont nées du fait qu’étant fixé sur ses plates-bandes flétries. Appartenant à tout le règne, et domine aussi le moi. Mari et femme, c’est lui, au point qu’il y ait eu de la sympathie. Conversation qui n’a connu de vrais biens ni de grands savants, qui se contenta de rigoler.

text to be replaced

Ceci, afin de pouvoir agir sur chaque ligne, par ex: (passez la souris sur les lignes du paragraphe)

Tantôt c’est la dernière fois… Pouvais-je renoncer à cette cure. Ivre d’orgueil et de plaisir, ce séjour à la ferme, à l’industrie et du commerce de détail sont nées du fait qu’étant fixé sur ses plates-bandes flétries. Appartenant à tout le règne, et domine aussi le moi. Mari et femme, c’est lui, au point qu’il y ait eu de la sympathie. Conversation qui n’a connu de vrais biens ni de grands savants, qui se contenta de rigoler.

On commence par la structure d’un plugin:

Structure d’un plugin:

Dans le code du plugin, on commence par encadrer chaque mot par un <span>:

On « split » la chaine par les espaces. On obtient un tableau de chaque mot auquel on ajoute les balises </span><span>  et que l’on « joint ». On encadre la chaine par <span></span>. Chaque mot est encadré par <span></span>, il n’y a plus d’espace entre les mots.

On repère la position du premier enfant <span> (le premier mot) et l’on déclare la variable newPos. L’objectif va être de boucler sur chaque mot, de repérer sa position, et de remplacer les balises <span></span> par un espace tant que le mot sera sur la même ligne, de garder ces balises si l’on change de ligne. A la fin de la boucle, il ne restera que les balises qui nous intéressent.

La variable newPos contient la position du mot, refPos la position du mot précédent. Si les deux positions sont égales, on efface les balises <span> en ne copiant que le texte auquel on ajoute un espace, et l’on efface la partie contenant les balises. On place la position dans la variable refPos afin de traiter le mot suivant.

Le code complet:

Pratique, si l’on veut pouvoir agir sur chaque ligne du « line wrap ».

1 commentaire

  1. Sympa, mais cela ne doit pas servir à grand chose. On apprend cependant à faire un plugin simple.

    Répondre

Soumettre un commentaire

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