Récupérer et remplacer du texte à partir d'un repère

Bonjour,

Je suis en train de réaliser un site sur Wordpress.

Je pars d'un thème premium dont je ne peux pas modifier le code php (ce sont les thèmes Qode, ils passent par un plugin pour définir la structure de leurs pages, du coup impossible de passer par un thème enfant). Je dois donc customiser la page en javascript/jquery

Sur une page, j'ai un petit problème sur les vignettes: je voudrais effectuer un retour à la ligne et décider où le faire (il y a le nom de l'expo, puis la date)

Pièce jointe 553440

Voici la page concernée : http://arnaudlebecq.com/expos/ : on voit le titre en faisant un hover.

Ce texte est récupéré dans le titre de la page Wordpress :

Pièce jointe 553444

Du coup, même si je mets une balise </br> dans le titre, cela me récupère du texte et affiche </br> en texte (logique je dirai)

Pièce jointe 553452

--

Du coup, je me posais la question, si je mets des repères [] et {} dans mon texte, je pourrais être en mesure de récupérer le texte à partir de [], puis ensuite de remplacer {saut} par la balise </br> désirée. Vous pensez que c'est possible ?

Pour le moment, j'en suis à récupérer le contenu de ma balise par la console :

Pièce jointe 553448

D'après mes recherches, les fonctions qui permettent de remplacer le contenu d'une balise, c'est pour remplacer le contenu intégral, pas une partie du contenu.

Pour le moment je sèche sur la manière de m'y prendre, si vous aviez quelques pistes SVP, ça serait top !

Merci d'avance

Bonjour,

Citation:

---

Envoyé par sebgac

...si je mets des repères [] et {} dans mon texte, je pourrais être en mesure de récupérer le texte à partir de [], puis ensuite de remplacer {saut} par la balise </br> désirée

---

1- Les [] sont inutiles
2- remplace {saut} par | (barre verticale -> "Alt Gr"+"6" au clavier) : c'est quand même plus "discret", et "propre" au niveau du TITRE de l'article !

Code:

---

Facets of Thailand | du 11 au 20 octobre 2019

---

Code:

---

1 2	<h4 itemprop="name" class="edgtf-pli-title entry-title" style="text-transform: uppercase"> Facets of Thailand | du 11 au 20 octobre 2019</h4>

---

Puis :

Code:

---

1 2 3 4 5 6 7

<script> jQuery(function(){ jQuery('h4.edgtf-pli-title.entry-title').each(function(){ jQuery(this).html( jQuery(this).html().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne }); }); </script>

---

Merci beaucoup pour ta réponse. Cela fonctionne parfaitement !!!

Juste quelques explications stp, si tu as le temps :

l'utilisation de each() : ce serait pour le faire sur chacun des élements appelés 'h4.edgtf-pli-title.entry-title' c'est bien ça ?

concernant la fonction .replace() : je comprends bien la logique et la combinaison avec la fonction .html() (on aurait pu mettre text() aussi n'est-ce-pas ?)

mais pourquoi en essayant sur la console, cela m'indique que replace() n'est pas une fonction ?

Pièce jointe 553528

Citation:

---

Envoyé par sebgac

l'utilisation de each() : ce serait pour le faire sur chacun des élements appelés 'h4.edgtf-pli-title.entry-title' c'est bien ça ?

---

Exact.

• jQuery each()

Citation:

---

concernant la fonction .replace() : je comprends bien la logique et la combinaison avec la fonction .html() (on aurait pu mettre text() aussi n'est-ce-pas ?)

---

NON, car <br/> est du HTML.

Cela dit, on aurait pu écrire (vu que le texte initial est... effectivement du texte (!)) :

Code:

---

jQuery(this).html( jQuery(this).text().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne

---

3- et c'est .html().replace ou .text().replace, pas .html.replace (il manque les () ).
Normalement, il te suffit de faire un copier-coller de mon code :

Code:

---

1 2 3 4 5 6 7

<script> jQuery(function(){ jQuery('h4.edgtf-pli-title.entry-title').each(function(){ // each : pour chaque ... (titre) jQuery(this).html( jQuery(this).text().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne }); }); </script>

---

Quand tu définis le TITRE de l'article, tu peux ajouter plusieurs "passages à la ligne" (à ta convenance) :

Code:

---

Facets of Thailand | du 11 au 20 | octobre 2019

---

donnera (à l'écran) :

Code:

---

1 2 3

Facets of Thailand du 11 au 20 octobre 2019

---

[EDIT] C'est bizarre...
Quand on est sur l'article lui-même, le <title> indique :

Code:

---

<title>Facets of Thailand % du 11 au 20 octobre 2019 – Galerie Arnaud Lebecq</title>

---

Le "|" s'est transformé en '%'... :koi:
Pourquoi ?

c'est super, ça fonctionne nickel !

Citation:

---

Le "|" s'est transformé en '%'...
Pourquoi ?

---

Peut-être parce que au départ j'avais utilisé % à la place de | ...

J'ai écrit deux autres lignes sur le même modèle, pour rajouter des balises avec class custom pour régler la font-size, ça marche génial, je suis content :) merci encore