Remplacer des éléments dans une page

**AyManoVic** · 01/02/2012, 21h53

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

**buggen25** · 01/02/2012, 22h08

Bonsoir,
Le mieux serait de créer un div, et mettre de ce dont tu as besoins a l'interieur

Code :

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

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 :

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

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 :

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

1
2
 
<img src="images/bouton.png" onclick="mettreEnRouge();" />

Cordialement

**Rachel** · 02/02/2012, 04h11

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 :

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

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 :

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

<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

**AyManoVic** · 02/02/2012, 14h13

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

**buggen25** · 02/02/2012, 14h28

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

Code :

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

1
2
 
<input type="Submit" value="Mettre en rouge" onclick="mettreEnRouge();" />

2-Ensuite mettre dans ton code javascript

Code :

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

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

**Rachel** · 02/02/2012, 14h31

ceci te conviendrait il ?

Code :

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

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

**AyManoVic** · 02/02/2012, 16h28

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

**Rachel** · 02/02/2012, 16h36

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 :

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

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

**AyManoVic** · 02/02/2012, 16h53

Merci Pour Votre Réponse , Je vais L'essayer

**AyManoVic** · 02/02/2012, 17h20

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

**NoSmoking** · 03/02/2012, 19h24

Bonjour,

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.

**Auteur** · 04/02/2012, 00h47

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é

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

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

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

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

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";
		}
	}
 
}

Remplacer des éléments dans une page

JavaScript

Discussions similaires

Partager

Partager