Discussion :

[spip93]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ;-)

[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.

[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

[mathieu]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

[Archimède]

Comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ProgElecT]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

En tout cas un grand merci à vous , ça m'ouvre un certain nombre de perspectives.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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