Rechercher et remplacer code à la volée ? [Résolu]

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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.

Citation:

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.

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

lien[i].href.match(/(.mp4)$/gi)

car "lien[i]" ne renvoit pas un "string" mais un objet.

04/02/2012, 00h05	#1
Mister Paul Membre régulier Inscription : février 2007 Messages : 483 Détails du profil Informations forums : Inscription : février 2007 Messages : 483 Points : 75 Points : 75	Rechercher et remplacer code à la volée ? 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 ?
	00

04/02/2012, 11h02	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	Moi la question que je me pose, c'est surtout pourquoi tu mets des attributs rel si tu veux des attributs target ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/02/2012, 08h23	#16
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	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=" __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain* : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

08/02/2012, 11h20	#18
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	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 ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain* : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

08/02/2012, 11h49	#19
Mister Paul Membre régulier Inscription : février 2007 Messages : 483 Détails du profil Informations forums : Inscription : février 2007 Messages : 483 Points : 75 Points : 75	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 ?
	00

04/02/2012, 10h13	#3
Mister Paul Membre régulier Inscription : février 2007 Messages : 483 Détails du profil Informations forums : Inscription : février 2007 Messages : 483 Points : 75 Points : 75	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 ?
	00

04/02/2012, 10h31	#5
Mister Paul Membre régulier Inscription : février 2007 Messages : 483 Détails du profil Informations forums : Inscription : février 2007 Messages : 483 Points : 75 Points : 75	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
	00

04/02/2012, 15h34	#13
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour à tous, cela deviendrait-il la préoccupation du moment ???? http://www.developpez.net/forums/d11...elements-page/
	00

08/02/2012, 12h12	#20
Willpower Membre Expert Boris Dessy sans emploi Inscription : décembre 2010 Messages : 874 Détails du profil Informations personnelles : Nom : Boris Dessy Localisation : Belgique Informations professionnelles : Activité : sans emploi Informations forums : Inscription : décembre 2010 Messages : 874 Points : 1 384 Points : 1 384	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 lien[i].href.match(/(.mp4)$/gi) car "lien[i]" ne renvoit pas un "string" mais un objet.
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email