Rechercher et remplacer code à la volée ?

Version imprimable

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.
08/02/2012, 12h22
Bovino

Citation:

Envoyé par Willpower

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

Si, ta réponse est juste ;)

A un détail près :

Citation:

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

c'est particulier pour les liens qui renvoient en fait l'adresse correspondante :

Code:

alert(document.getElementsByTagName('a')[0]);

(mais bon, ça reste néanmoins un objet :koi:)

Code:

alert(typeof document.getElementsByTagName('a')[0]);
08/02/2012, 12h44
Mister Paul

Oui Merci on rentre bien dans le if maintenant.
Mais ma fonction ne fonctionne pas !
Elle est dans le <head> et est appelée avec <body onLoad

Ce n'est pas dans ce cas qu'il faut mettre des document.write au lieu de innerHTML

Code:

document.getElementByTagName(lien[i].href).innerHTML = 'http:// www.ma_nouvelle_adresse.com/'+partie[1];
08/02/2012, 13h00
Bovino

Citation:

Ce n'est pas dans ce cas qu'il faut mettre des document.write au lieu de innerHTML

Non !
Le problème ne vient pas de innerHTML ou de document.write() (au passage, tu devrais oublier cette instruction, elle est fortement déconseillée) mais du fait que tu ne comprends pas ce que tu écris...

Code:

document.getElementByTagName

C'est getElementsByTagName avec un "s" car cette instruction renvoie une collection d'éléments dont le nom de balise correspond à l'argument passé en paramètre.

Code:

document.getElementByTagName(lien[i].href)

du coup, là, tu recherches une balise correspondant au contenu du lien d'une balise <a>... :no:

Code:

document.getElementByTagName(lien[i].href).innerHTML

et maintenant, tu veux affecter une URL à cette balise imaginaire... :cry:

Commence par le commencement et apprends les bases de JavaScript, ça ne sera pas inutile ;)

Je galère mais je m'accroche docteur…
j'ai clarifié la fonction (Merci à vous) et n'y ai plus de problème que pour remplacer les valeurs du lien (mais la valeur de remplacement est bonne… ouf enfin)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript">  </script>
Citation:

Envoyé par Bovino

(au passage, tu devrais oublier cette instruction, elle est fortement déconseillée)

Aussi, j'ai donc essayé de remplacer mes document.write par des innerHTML (j'ai un javascript dans le <head> qui charge telle ou telle .css suivant que la page est chargée depuis un smartphone ou non.) mais ça ne veut pas fonctionner...

Code:

document.write('<link rel="stylesheet" type="text/css" href="styles_smartphone.css">');

remplacé par

Code:

document.body.innerHTML += <link rel="stylesheet" type="text/css" href="stylessmartphones.css">;

pourquoi ne pas utiliser la collection document.links qui regroupe tous les liens d'une page ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
// recup collection des liens de la page mise en place par les navigateurs
var oLien = document.links,
    i, nbLien,
    tRecup,
    sDomain = "http://www.developpez.net/";
 
// boucle sur les liens
for( i = 0, nbLien = oLien.length; i < nbLien; i++){
  // décompose l'adresse pour récup. du nom du fichier
  tRecup = oLien[i].href.split('/');
  // affectation new adressee
  oLien[i].href = sDomain + tRecup[tRecup.length-1];
}

ou encore pour la boucle, plus rapide(?)

Code:

1
2
3
4
for( i = 0, nbLien = oLien.length; i < nbLien; i++){
  //  avec pathname en supprimant le / de début
  oLien[i].href = sDomain + oLien[i].pathname.replace('/', '');
}

il reste bien sûr à intégrer le test pour autoriser la modif.

09/02/2012, 00h04
Mister Paul

:applo:
En plus avec cette soluce pas besoin des innerHTML que je n'arrive pas encore à utiliser (même pour charger mes css…) !

Merci
09/02/2012, 20h27
NoSmoking

Citation:

Envoyé par Mister Paul

En plus avec cette soluce pas besoin des innerHTML que je n'arrive pas encore à utiliser (même pour charger mes css…) !

Je ne saurais que citer un ancien dicton chinois, période MING me semble-t-il !

Citation:

Avant d'utiliser un objet, apprend à connaître ses propriétés pour savoir ce que tu peux en faire.

et c'est en substance ce que t'a écrit Bovino

Citation:

Commence par le commencement et apprends les bases de JavaScript, ça ne sera pas inutile ;)
09/02/2012, 21h58
Mister Paul

:aie:

Merci pour votre aide et votre patience.