Remplacer des éléments dans une page

Version imprimable

01/02/2012, 21h53
AyManoVic

Remplacer des éléments dans une page

Salut , j'espérais faire un changement de style en javascript , l'idée consiste à changer tout les mots "blue" par exemple en "red" dans la page , L'idée qui me vient est de stocker tout le code source de la page dans une variable et faire un remplacement avec la méthode replace , mais techniquement je ne vois pas comment faire , De l'aide S'il vous plaît :aie:
01/02/2012, 22h08
buggen25
Bonsoir,
Le mieux serait de créer un div, et mettre de ce dont tu as besoins a l'interieur
Code:

1 2 3 4 <div id="mondiv"> <p>Des truc bleus a l'interieur</p> </div>
Par la suite tu met un code javascript à l'interieur d'une fonction
Code:

1 2 3 4 function mettreEnRouge(){ document.getElementById("mondiv").innerHTML = "<p>Des truc rouge a l'interieur</p>"; }
Par la suite ajoute un evennement onclick à ton truc clickable
Code:

1 2 <img src="images/bouton.png" onclick="mettreEnRouge();" />
Cordialement
02/02/2012, 04h11
Rachel
tu voudrais modifier le css où il y a la propriété color ?
l'idéal serait que tous tes éléments de couleur bleue aient la même classe, puis dans le javascript :
Code:

1 2 3 4 5 6 7 8 9 function changeColor(classe,couleur) { var classes = document.getElementsByClassName(classe); for(var i=0;i<classes.length;i++) { classes[i].style.color = couleur; } }
puis enfin dans ton html, un bouton comme ceci :

Code:

<input type="button" value="changer de couleur" onclick="changeColor('classe','red')" />

évidemment, tu changeras "classe" par la classe que tu as attribué as tes éléments
02/02/2012, 14h13
AyManoVic

Merci pour vos réponses mais ce n'est pas ça , je voudrai remplacer toute instance dans le code source du mot "blue" et le remplacer par "red" y compris les noms des dossiers , nom d'images etc..

Bonjour,
Tu veux remplacer le body de ta page web je pense, dans ce cas c'est possible
1- Code html
Code:

1 2 <input type="Submit" value="Mettre en rouge" onclick="mettreEnRouge();" />
2-Ensuite mettre dans ton code javascript
Code:

1 2 3 4 5 function mettreEnRouge(){ var reg=new RegExp("(blue)", "g"); document.body.innerHTML = document.body.innerHTML.replace(reg, "red"); }

ceci te conviendrait il ?

Code:

1
2
3
4
5
6
var a=document.body.innerHTML;
var i=a.indexOf("blue");
while (i >= 0) {
	a=a.replace("blue","red");
	i=a.indexOf("blue");
}

02/02/2012, 16h28
AyManoVic

ça commence à être clair ! Merci
Si Je veux remplacer tout ce qui vient après la balise <html> Que faire ?
02/02/2012, 16h36
Rachel
Citation:

Envoyé par AyManoVic

ça commence à être clair ! Merci
Si Je veux remplacer tout ce qui vient après la balise <html> Que faire ?

dans ce cas :
Code:

1 2 3 4 5 6 7 var a=document.getElementsByTagName('html')[0].innerHTML; var i=a.indexOf("blue"); while (i >= 0) { a=a.replace("blue","red"); i=a.indexOf("blue"); } }
02/02/2012, 16h53
AyManoVic

Merci Pour Votre Réponse , Je vais L'essayer
02/02/2012, 17h20
AyManoVic

Re.
Ne faudrait il pas faire un document.write pour voir les changements ?
et est ce que ton dernier code donne tout ce qui est entre <html>et </html> ?
Merci ^^
03/02/2012, 19h24
NoSmoking

Bonjour,

Citation:

Ne faudrait il pas faire un document.write pour voir les changements ?

il te faut effectivement réinjecter les modifications dans le document MAIS PAS AVEC document.write pour une simple raison c'est que tu vas réécrire ta fonction, qui contiendra le document.write, qui contiendra le document.write, qui contiendra le...cela s'appelle une boucle infinie.

Tu peux toujours essayer de modifier le innerHTML ainsi modifier mais pas sûr que cela plaise à tous les navigateurs.

bonsoir,

franchement placer tout le code de la page document.body.innerHTML dans une variable pour remplacer un mot par un autre ce n'est pas très optimisé :roll:

Surtout que rien ne nous dit que "blue" ou "red" se trouvent exclusivement dans le texte : ces deux mots peuvent se retrouver par exemple dans la définition du style, ou dans un code javascript.

Il ne serait pas mieux d'encadrer les mots en question par un <span> et de les modifier le moment venu ?
Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <body> <div> du bla bla bla bla bla bla <span id="mot1" style="font-weight:bold">blue</span> bla bla bla bla bla </div> <div> du bla bla bla bla bla bla <span id="mot2" style="font-weight:bold">blue</span> bla bla bla bla bla </div> <div> du bla bla bla bla bla bla <span id="mot3" style="font-weight:bold">blue</span> bla bla <span style="color:blue">reste en bleu quoi qu'il arrive</span> bla bla bla bla bla bla </div> <input type="button" onclick="changeMot()" value="Cliquez ici" /> </body>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function changeMot() { var i; var tabSpan; var reg = new RegExp("^(mot)","gi"); tabSpan = document.getElementsByTagName("span"); for (i=0; i<tabSpan.length; i++) { if (tabSpan[i].id.match(reg)) { document.getElementById(tabSpan[i].id).innerHTML = "red"; } } }