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\"/>");});