Rechercher et remplacer code à la volée ?

**Mister Paul** · 04/02/2012, 00h05

Bonjour,

je souhaiterais remplacer à la volée certains contenus d'une page html.

Par exemple concrètement :
Remplacer toutes les chaînes qui commencent par :

rel="

et qui finissent par :

]"

par ce contenu :

target=_blank

Euh... c'est possible ça ?

**Auteur** · 04/02/2012, 01h09

bonsoir,

c'est possible avec des expressions régulières.
Regarde si celle-ci te convient :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	var reg = new RegExp("^(rel=).*(])$","gi");
 
 
	var texte1 = "rel=coucou tout le monde]";
	var texte2 = "coucou rel=tout] le monde";
	var texte3 = "coucou tout le monde";
	var texte4 = "coucou tout le monde]";
 
	alert(texte1.replace(reg, "target=_blank"));  //target=_blank"
	alert(texte2.replace(reg, "target=_blank"));  //inchangée
	alert(texte3.replace(reg, "target=_blank"));  //inchangée
	alert(texte4.replace(reg, "target=_blank"));  //inchangée

**Mister Paul** · 04/02/2012, 10h13

Oh… joli !

Et c'est possible de changer le code html d'une page statique à la volée lors de son ouverture ?

Il y a une fonction qui fait ce rechercher / remplacer ?

**Willpower** · 04/02/2012, 10h18

Envoyé par Mister Paul

Oh… joli !

Et c'est possible de changer le code html d'une page statique à la volée lors de son ouverture ?

Il y a une fonction qui fait ce rechercher / remplacer ?

A la barbare :

Code :

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

document.body.innerHTML = document.body.innerHTML.replace(....);

**Mister Paul** · 04/02/2012, 10h31

Pourquoi barbare ? Ça me paraît surtout très puissant !

On peut aussi l'utiliser pour directement insérer du code (sans en remplacer) ?
Moi j'utilisais un document.write

**Bovino** · 04/02/2012, 11h02

Moi la question que je me pose, c'est surtout pourquoi tu mets des attributs rel si tu veux des attributs target ?

**Willpower** · 04/02/2012, 11h07

Envoyé par Mister Paul

Pourquoi barbare ? Ça me paraît surtout très puissant !

On peut aussi l'utiliser pour directement insérer du code (sans en remplacer) ?
Moi j'utilisais un document.write

document.write ne peut s'utiliser que quand le document est encore en cours d'écriture du genre :

Code html :

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

1
2
3
4
5
<body>
debut
<script>document.write('milieu');</script>
fin
</body>

il ne peut donc pas s'utiliser en dehors du body et ne peut non plus pas être appelé après le chargement de la page. (exemple une fonction différée par un évènement ou un timer)

---

le body.innerHTML remplace tout le code HTML de la page, j'en déduis donc (je me trompe p-ê... si qqn peut confirmer ou infirmer?) que si tu l'utilises, il va remplacer tout le code par un code quasi identique et que toute la page sera réévaluée. (au niveau du DOM). C'est pourquoi je pense que ce n'est pas la meilleure solution même si en pratique ça fonctionne bien si on ne doit l'utiliser qu'une fois par page.

oui, tu peux l'utiliser pour ajouter du code, par exemple si tu as un body vide et que tu construis la page dynamiquement.

Code :

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

document.body.innerHTML += content;

---

enfin, une alternative, est de ne modifier que les éléments voulus, par exemple :

Code :

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

1
2
3
4
5
6
7
8
var rel, i, liens = document.getElementsByTagName('a');
for(i=0;i<liens.length;i++){
    if(rel = liens[i].getAttribute('rel')){
        if(rel.length > 0 && rel.charAt(rel.length-1)==']'){
            liens[i].target='_blank';
        }
    }
}

**Bovino** · 04/02/2012, 11h08

Sinon, une méthode un peu moins barbare (mais pas compatible IE<8) :

Code :

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

1
2
3
4
5
6
var elems = document.querySelectorAll('[rel$="]"]');
var elemLength = elems.length;
while(elemLength--){
    elems[elemLength].removeAttribute('rel');
    elems[elemLength].target = '_blank';
}

**Mister Paul** · 04/02/2012, 11h18

Envoyé par Bovino

Moi la question que je me pose, c'est surtout pourquoi tu mets des attributs rel si tu veux des attributs target ?

Je ne suis pas sûr au final de mettre vraiment des target.
En fait c'est une histoire de film Flash qui s'ouvre en lecture dans une box. Ça marche bien mais c'est incompatible avec les smartphones.
Le code qui ouvre le layer ne fait pas de fallback Flash->HTML5 quand nécessaire. Alors je me le bricole.

Je retourne à mon document.write vs innerHTML

**Auteur** · 04/02/2012, 11h22

Envoyé par Bovino

Moi la question que je me pose, c'est surtout pourquoi tu mets des attributs rel si tu veux des attributs target ?

Pareil, je suis assez surpris.

Envoyé par Willpower

document.write ne peut s'utiliser que quand le document est encore en cours d'écriture du genre :

(...)

il ne peut donc pas s'utiliser en dehors du body et ne peut non plus pas être appelé après le chargement de la page. (exemple une fonction différée par un évènement ou un timer)

si justement. Tu peux utiliser document.write() dans une fonction... Et c'est là que beaucoup de débutants font l'erreur : car dans ce cas document.write() remplace tout le contenu de la page (tout ce qui se trouve entre <html> et </html>) par la valeur de son argument.

Le mieux est de passer par les fonctions DOM.

Envoyé par Willpower

le body.innerHTML remplace tout le code HTML de la page, j'en déduis donc (je me trompe p-ê... si qqn peut confirmer ou infirmer?) que si tu l'utilises, il va remplacer tout le code par un code quasi identique et que toute la page sera réévaluée. (au niveau du DOM). C'est pourquoi je pense que ce n'est pas la meilleure solution même si en pratique ça fonctionne bien si on ne doit l'utiliser qu'une fois par page.

la valeur donnée à innerHTML remplacera tout ce qui se trouve entre les balises <body> et </body> (et cela fait une sacré différence avec document.write() !

)

Mais comme l'a indiqué Bovino c'est une méthode barbare car le contenu d'une page HTML (balises + texte + style en ligne, etc) est énorme donc gourmand en mémoire. L'alternative que tu proposes est plus propre car tu ne cibles que quelques éléments de la page.

**Willpower** · 04/02/2012, 11h43

Envoyé par Auteur

si justement. Tu peux utiliser document.write() dans une fonction... Et c'est là que beaucoup de débutants font l'erreur : car dans ce cas document.write() remplace tout le contenu de la page (tout ce qui se trouve entre <html> et </html>) par la valeur de son argument.

oui, je résumais son utilisation à l'écriture sur la page ouverte, car en pratique document.write n'est (quasi?) jamais utilisé pour remplacer tout le corps d'une page. (si? exemple de site?)

Envoyé par Auteur

Mais comme l'a indiqué Bovino c'est une méthode barbare car le contenu d'une page HTML (balises + texte + style en ligne, etc) est énorme donc gourmand en mémoire. L'alternative que tu proposes est plus propre car tu ne cibles que quelques éléments de la page.

J'ai moi-même signalé en proposant ma première solution qu'elle était barbare.

**Auteur** · 04/02/2012, 12h46

Envoyé par Willpower

oui, je résumais son utilisation à l'écriture sur la page ouverte, car en pratique document.write n'est (quasi?) jamais utilisé pour remplacer tout le corps d'une page. (si? exemple de site?)

on peut l'utiliser pour créer du contenu dans une pop-up. D'exemple de sites, je n'en ai pas, d'erreurs de débutants, tu en trouveras à la pelle dans ce forum

Envoyé par Willpower

J'ai moi-même signalé en proposant ma première solution qu'elle était barbare.

euh oui pardon

**NoSmoking** · 04/02/2012, 15h34

Bonjour à tous,
cela deviendrait-il la préoccupation du moment ????

http://www.developpez.net/forums/d11...elements-page/

**Auteur** · 04/02/2012, 18h19

Envoyé par NoSmoking

Bonjour à tous,
cela deviendrait-il la préoccupation du moment ????

http://www.developpez.net/forums/d11...elements-page/

il y a effectivement des similitudes.

**Mister Paul** · 06/02/2012, 23h10

Bon j'ai remonté mes manches avec vos infos précieuses... mais je bute encore...

En route les choses se sont précisées et je cherche à modifier tous les liens de la page qui ont l'extension .mp4 en insérant devant un début d'URL :

Code :

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
function changeLien()
	{ 	
		var i;
		var lien;
		var reg = new RegExp('^(href=").*(.mp4)$','gi');
		lien = document.getElementsByTagName('a');
 
		for (i=0; i<lien.length; i++)
		{
			if (lien[i].href.match(reg))
			{	
				var partie = new Array();
				partie = reg.split('"');
				document.getElementByTagName(lien[i].href).innerHTML = 'http:// www.ma_nouvelle_adresse.com/'+partie[1];
			}
		}
	}

Mais ça ne fonctionne pas (je ne rentre jamais dans le 'if')

Qu'est-ce que j'ai mal fait ?

**Bovino** · 07/02/2012, 08h23

Code :

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

var reg = new RegExp('^(href=").*(.mp4)$','gi');

Code :

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

if (lien[i].href.match(reg))

Il est rare que le lien d'une balise <a> commence par href="

**Mister Paul** · 08/02/2012, 11h16

Envoyé par Bovino

Il est rare que le lien d'une balise <a> commence par href="

Aïe je n'y arrive pas...

Qu'est-ce que j'aurais dû écrire ?

**Bovino** · 08/02/2012, 11h20

Dans ton expression régulière :

Code :

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

var reg = new RegExp('^(href=").*(.mp4)$','gi');

^(href=") signifie : commence par 'href="'.
Or, cette expression régulière, tu l'appliques à

Code :

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

lien[i].href.match(reg)

c'est à dire au contenu de l'attribut href de ton lien !
Tu recherches donc un lien qui serait écrit comme ça :

Code html :

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

<a href='href="www.toto.fr'>Lien</a>

tu comprends bien (du moins, je l'espère...) que ça ne va pas !

**Mister Paul** · 08/02/2012, 11h49

Oui là j'ai bien compris !

Mais je n'arrive toujours pas à trouver comment faire passer ça. J'ai essayé :

Code :

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

lien[i].match(reg)

tout en gardant la même expression régulière. Mais ça ne va pas non plus…

Il y a d'autres erreurs dans mon code ?

**Willpower** · 08/02/2012, 12h12

Je suis nul en RegExp, donc ma réponse est à prendre avec des pincettes.

Mais tu dois faire l'inverse : retirer le "href" de l'expression régulière :

du genre :

Code :

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