Rechercher et remplacer code à la volée ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

04/02/2012, 00h05
Mister Paul

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

bonsoir,

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

Code:

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

04/02/2012, 10h13
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 ?
04/02/2012, 10h18
Willpower

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:

document.body.innerHTML = document.body.innerHTML.replace(....);
04/02/2012, 10h31
Mister Paul

:ccool:

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
04/02/2012, 11h02
Bovino

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

Citation:

Envoyé par Mister Paul

:ccool:

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:

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:

document.body.innerHTML += content;

---

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

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

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

Code:

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

04/02/2012, 11h18
Mister Paul

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 ? 8O

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
04/02/2012, 11h22
Auteur

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 ? 8O

Pareil, je suis assez surpris. :koi:

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() ! :aie:)

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.
04/02/2012, 11h43
Willpower

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.

;)
04/02/2012, 12h46
Auteur

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

Citation:

Envoyé par Willpower

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

;)

euh oui pardon :oops:
04/02/2012, 15h34
NoSmoking

Bonjour à tous,
cela deviendrait-il la préoccupation du moment ????
:koi: http://www.developpez.net/forums/d11...elements-page/
04/02/2012, 18h19
Auteur

Citation:

Envoyé par NoSmoking

Bonjour à tous,
cela deviendrait-il la préoccupation du moment ????
:koi: http://www.developpez.net/forums/d11...elements-page/

il y a effectivement des similitudes.

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

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:

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 ?
:roll:

07/02/2012, 08h23
Bovino

Code:

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

Code:

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

Il est rare que le lien d'une balise <a> commence par href=" :roll:
08/02/2012, 11h16
Mister Paul

Citation:

Envoyé par Bovino

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

Aïe je n'y arrive pas... :?
Qu'est-ce que j'aurais dû écrire ?
08/02/2012, 11h20
Bovino

Dans ton expression régulière :

Code:

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

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

Code:

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:

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

tu comprends bien (du moins, je l'espère...) que ça ne va pas !
08/02/2012, 11h49
Mister Paul

Oui là j'ai bien compris ! :ccool:

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

Code:

lien[i].match(reg)

tout en gardant la même expression régulière. Mais ça ne va pas non plus… :cry:
Il y a d'autres erreurs dans mon code ?
08/02/2012, 12h12
Willpower

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:

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

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

Voir 40 message(s) de cette discussion en une page