Rechercher/remplacer une ligne de code HTML par une autre ligne de code HTML

Version imprimable

Bonjour à tous et à toutes,

(Pour des raisons qui seraient trop longues à expliquer) Je sollicite votre aide en Javascript (où je suis une buse) afin de rechercher une ligne de code HTML pour la remplacer par une autre ligne de code HTML.

Voici mon bout de code pour un bouton Mon compte :
Code:

1 2 3 4 5 6 <li class="bg-nav-inverse"> <a href="https://nom_du_site.fr/user/login"> <i class="fas fa fa-user-circle"></i> <span>Mon compte</span> </a> </li>
Et dans ce bout de code je cherche en l'occurrence à remplacer :

Code:

<i class="fas fa fa-user-circle"></i>

(c'est à dire l'icône derrière un bouton Mon compte)
par

Code:

<img src="https://nom_du_site.fr/images/compte.svg">

En cherchant sur Internet, je suis tombé sur cette page.
J'ai modifié, à ma sauce le script et voici ce que ça donne :
Code:

1 2 3 4 <script type="text/javascript"> const p = '<i class="fas fa fa-user-circle"></i>'; console.log(p.replace('<i class="fas fa fa-user-circle"></i>', '<img src="https://nom_du_site.fr/images/compte.svg">')); </script>
mais comme je ne sais pas où le résultat de ce "rechercher/remplacer" est censé s'afficher (en lieu et place du texte à remplacer ou ailleurs ?), je ne sais pas si mon script fonctionne ou non.

Par ailleurs, même si ce script de "rechercher/remplacer" fonctionnait, je ne sais même pas si mon bouton fonctionnerait ou non.

En effet, j'ai fait le remplacement donné en exemple "à la main" sur le bouton Mon compte d'une page de mon site (via la console de développement), mais après le remplacement de l'icône FontAwesome par une image, le bouton ne fonctionnait plus. Sauriez-vous pourquoi ?

Bref, quel serait, SVP, le code JS pour remplacer du code HTML par un autre code HTML ?

Je vous remercie pour votre aide

Bonne journée à vous ;-)

21/02/2021, 12h02
mathieu

votre code remplace juste une chaine de caractère par une autre dans la variable mais ne modifie pas l'affichage.

est ce que vous utilisez déjà jquery sur cette page ? je demande cela parce que je m'y connais mieux en jquery. et si vous ne voulez pas l'utiliser, un autre visiteur du forum aura surement une proposition pour faire cela en pur javascript.
21/02/2021, 12h26
spip93

Bonjour Mathieu,

Merci pour votre réponse.
Je crois qu'il n'y a que du Javascript dans la page.
Ceci dit, je peux tester du jQuery et voir si ça fonctionne ou non.

Encore merci.
Bonne journée ;)
21/02/2021, 12h48
mathieu

avec jquery, vous pouvez faire le remplacement avec ce code :

Code:

$("i.fas.fa.fa-user-circle").replaceWith("<img src=\"https://nom_du_site.fr/images/compte.svg\"/>");
21/02/2021, 16h47
spip93

Désolé Mathieu, votre code ne fonctionne pas sur mon site.
J'ai pourtant mis le code suivant dans le fichier remplace_html.js :

Code:

$("i.fas.fa.fa-user-circle").replaceWith("<img src=\"https://nom_du_site.fr/images/compte.svg\"/>");

puis, dans l'entête de la page j'ai mis ceci pour appeler le fichier JS :

Code:

<script src="https://nom_du_site.fr/scripts/remplace_html.js"></script>

Avez-vous une idée sur ce qui ne va pas ? A moins que quelqu'un ait une alternative en JS pur ?

Comme ça :
Code:

1 2 3 4 let image=document.createElement('IMG'); image.setAttribute('src', 'https://nom_du_site.fr/images/compte.svg\'); document.body.replaceChild(image, document.getElementsByClassName("fas fa fa-user-circle")[0] );
J'ai peut-être oublié des trucs... sinon regarde ici :
https://developer.mozilla.org/fr/doc...e/replaceChild

21/02/2021, 17h23
ProgElecT
Citation:

Envoyé par spip93

Bonjour Mathieu,
...
Je crois qu'il n'y a que du Javascript dans la page.
Ceci dit, je peux tester du jQuery et voir si ça fonctionne ou non.
...

Pour utiliser du jQuery il faut charger le fichier correspondant
Code:

1 2 3 <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> </head>
Un lien pour avoir le fichier en local https://jquery.com/download/#downloading-jquery
30/03/2021, 14h50
spip93

Bonjour Mathieu,

Désolé de vous répondre si tardivement, mais comme mes premières tentatives ne fonctionnaient pas, j'avais (un temps) laissé tombé.

Tout à l'heure, j'ai refait une tentative avec votre premier script :

Code:

<script>$("i.fas.fa.fa-user-circle").replaceWith("<img src=\"https://nom_du_site.fr/images/compte.svg\"/>");</script>

sauf que cette fois-ci je l'ai placé dans le pied de page et... (miracle) ça a fonctionné :) !!

Je crois que la différence (et l'erreur) fondamentale vient de là (d'où je place le JS).
J'ai (bêtement) cru pouvoir mettre le JS dans le header. Mea culpa :boulet:

En tout cas un grand merci à vous :merci: :merci: , ça m'ouvre un certain nombre de perspectives.
30/03/2021, 16h41
SpaceFrog
Il faut en effet faire attention à la chronologie avec laquelle les codes sont interprétés.

les éléments doivent exister dans le dom afin de pouvoir les manipuler ( en JS document.addEventListener('DOMContentLoaded', ... )

c'est d'ailleurs à cela que sert le document ready en javascript qui attend que les éléments soient implémenté ce qui permet de placer le script n'importe ou, sinon il faut en effet placer le script APRES que le code HTML de l'élément ait été interprété par le navigateur:
Code:

1 2 3 $(document).ready( function(){ $("i.fas.fa.fa-user-circle").replaceWith("<img src=\"https://nom_du_site.fr/images/compte.svg\"/>"); });
ou notation abrégée :

Code:

$(function(){$("i.fas.fa.fa-user-circle").replaceWith("<img src=\"https://nom_du_site.fr/images/compte.svg\"/>");});