[RegExp] images, css et liens : relatif => absolu

fedo2000 · 31/03/2011, 11h25

Bonjour !

Je vous explique mon problème en espérant trouver de l'aide ici

Je dois réaliser un javascript (je pensais à une regex mais c'est un point faible pour moi

) qui :
Etant donné une chaine - code html -, recherche tous les liens relatifs des img, css et liens href et y ajoute le nom de domaine "http://www.monsite.com/" afin de les passer en absolu.

Ex :
- <img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/toto.jpg">
- <a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">

Ceci en prevoyant des quotes simples/doubles, les écritures avec ou sans éspace, ect...

Merci par avance !

SpaceFrog · 31/03/2011, 11h53

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
return (arguments[1]+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

javatwister · 31/03/2011, 12h16

devrait fonctionner si tu as bien tous tes liens en relatif;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var im=document.images, lnk=document.links;
var racine="http://monsite/";
for(i in im){
	im[i].adr=im[i].src;
	im[i].src=racine+im[i].adr
}
 
for(i in lnk){
	lnk[i].adr=im[i].src;
	lnk[i].href=racine+lnk[i].adr
}

mekal · 31/03/2011, 12h23

je penserait plutot a quelquechose comme ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function change(){
 
var allElements = document.getElementsByTagName('img');
for (var i = 0; i< allElements.length; i++){
allElements[i].src="http://www.monsite.com/"+allElements[i].src
}
var allElements = document.getElementsByTagName('a');
for (var i = 0; i< allElements.length; i++){
allElements[i].href="http://www.monsite.com/"+allElements[i].href
 
}
}

SpaceFrog · 31/03/2011, 12h25

Citation:

Etant donné une chaine

tu veux traiter une chaine ou le code html de ta page .?

javatwister · 31/03/2011, 12h28

en fait, si j'ai bien lu, c'est "une chaîne" et entre tirets "code html";

d'où ma réponse généralisante;

mekal · 31/03/2011, 12h48

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var im=document.images, lnk=document.links;
var racine="http://monsite/";
for(i in im){
	im[i].adr=im[i].src;
	im[i].src=racine+im[i].adr
}
 
for(i in lnk){
	lnk[i].adr=im[i].src;
	lnk[i].href=racine+lnk[i].adr
}

mince je me suis fait devancé

fedo2000 · 31/03/2011, 14h34

Hello,

Tout d'abord merci pour vos réponses

C'est effectivement une chaine qui contient le code html d'une page.
exemple (la chaine réelle est beaucoup plus étoffée):
var chaine = '<html><head></head><body> mon image <img src = "image.jpg"></body></html>';

Sinon le code suivant, ne me donne pas grand chose

D'ailleurs, je ne vois pas où est ce que l'on précise la partie "http://www.monsite.com/" à ajouter à la chaine afin d'obtenir une adresse absolue:

Citation:

Envoyé par SpaceFrog

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
return (arguments[1]+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

Merci par avance.

SpaceFrog · 31/03/2011, 14h45

ha c'est l'inverse

là je retire le http

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
return ("http://www.monsite.com/"+arguments[1]+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

fedo2000 · 31/03/2011, 15h32

Hello,

On est pas loin

- 1) Pour une image en relatif, il y a un soucis :
J'obtiens <img http://www.monsite.com/src="toto.jpg"> au lieu de <img src="http://www.monsite.com/toto.jpg">

- 2) Deux autres soucis :
a) Je ne dois pas toucher aux images et liens qui ont déjà chemin absolu : "http://www.monsite.com/toto.jpg" ou "http://www.autresite.com/toto.jpg"

b) Et ne pas supprimer les dossiers dans le chemin relatif src="page1/toto.jpg" devient src="http://www.monsite.com/page1/toto.jpg"

Mais à part ça tout va bien

Citation:

Envoyé par SpaceFrog

ha c'est l'inverse

là je retire le http

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
return ("http://www.monsite.com/"+arguments[1]+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

SpaceFrog · 31/03/2011, 15h36

pour le 1)

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
return (arguments[1]+"http://www.monsite.com/"+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

pour le 2) faut que je reflexionnasse

SpaceFrog · 31/03/2011, 15h42

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function replacecallback(){
if(!(/^http:\/{2}/).test(arguments[3])){
res= (arguments[1]+"http://www.monsite.com/"+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
else {
res=arguments[1]+arguments[3]+'"'}
return res
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <img src="http://www.autresite.com/totpoo.jpg"><a href="page1.html"> e<a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

fedo2000 · 31/03/2011, 16h00

Trop fort SpaceFrog !, j'ai testé et le problème des liens déjà en absolu est ok, reste seulement le b)

b) Et ne pas supprimer les dossiers dans le chemin relatif src="page1/toto.jpg" devient src="http://www.monsite.com/page1/toto.jpg"

Citation:

Envoyé par SpaceFrog

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function replacecallback(){
if(!(/^http:\/{2}/).test(arguments[3])){
res= (arguments[1]+"http://www.monsite.com/"+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
else {
res=arguments[1]+arguments[3]+'"'}
return res
}
 
var chaine='<img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <img src="http://www.autresite.com/totpoo.jpg"><a href="page1.html"> e<a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

SpaceFrog · 31/03/2011, 16h05

pas compris :red:

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
18
19
20
21
<script type="text/javascript">
function replacecallback(){
alert(arguments[3])
if((/^http:\/{2}/).test(arguments[3])){
res=arguments[1]+arguments[3]+'"'
}
else {
if(arguments[3].indexOf('/')>-1){
	res=arguments[1]+arguments[3]+'"'
	}
else{
res= (arguments[1]+"http://www.monsite.com/"+arguments[3].match(/(\w+\.\w+)$/)[0]+'"')
}
}
return res
}
 
var chaine='<img src="toto.jpg"><img src="repertoire/toto.jpg"> est réecrit en <img src="http://www.monsite.com/totpoo.jpg"><a href="page1.html"> est réecrit en <img src="http://www.autresite.com/totpoo.jpg"><a href="page1.html"> e<a href="http://www.monsite.com/page1.html">';
var res=chaine.replace(/((src|href)=")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})
alert(res)
</script>

fedo2000 · 31/03/2011, 16h23

Dans le résultat obtenu, les liens en relatif avec un sous-dossier, ex : src = "dossierImages/image.jpg" sont remplacés par src = "http://www.monsite.com/image.jpg"
=> dossierImages/ a disparu

*********************************

Je vois qu'il y a un nouveau code => je teste

SpaceFrog · 31/03/2011, 16h31

avec la dernière version ?

fedo2000 · 31/03/2011, 16h40

J'ai juste modifié :

Code :

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

1
2
3
if(arguments[3].indexOf('/')>-1){
	res=arguments[1]+arguments[3]+'"'
	}

en

Code :

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

1
2
3
if(arguments[3].indexOf('/')>-1){
	res=(arguments[1]+"http://www.monsite.com/"+arguments[3]+'"')
	}

et c OK

Merci à tous pour votre aide et merci beaucoup à SpaceFrog !!!

SpaceFrog · 31/03/2011, 16h46

en effet je n'avais pas tout compris de ta demande ...

En revanche tu as bien compris la solution proposée

fedo2000 · 31/03/2011, 16h58

je me suis emballé trop rapidement

J'ai un soucis avec les espaces : quand il y a des espaces entre les href et les = et les " ca ne fonctionne plus

SpaceFrog · 31/03/2011, 17h01

Code :

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

var res=chaine.replace(/((src|href)\s*=\s*")([^"]*)"/g, function(f,b,m,e){return replacecallback(f,b,m,e)})

31/03/2011, 11h25	#1
fedo2000 Invité de passage Ingénieur développement logiciels Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	images, css et liens : relatif => absolu Bonjour ! Je vous explique mon problème en espérant trouver de l'aide ici Je dois réaliser un javascript (je pensais à une regex mais c'est un point faible pour moi ) qui : Etant donné une chaine - code html -, recherche tous les liens relatifs des img, css et liens href et y ajoute le nom de domaine "http://www.monsite.com/" afin de les passer en absolu. Ex : - <img src="toto.jpg"> est réecrit en <img src="http://www.monsite.com/toto.jpg"> - <a href="page1.html"> est réecrit en <a href="http://www.monsite.com/page1.html"> Ceci en prevoyant des quotes simples/doubles, les écritures avec ou sans éspace, ect... Merci par avance !
	00

31/03/2011, 12h28	#6
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	en fait, si j'ai bien lu, c'est "une chaîne" et entre tirets "code html"; d'où ma réponse généralisante; __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

31/03/2011, 16h31	#16
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	avec la dernière version ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/03/2011, 16h46	#18
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	en effet je n'avais pas tout compris de ta demande ... En revanche tu as bien compris la solution proposée __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/03/2011, 17h01	#20
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	Code : Sélectionner tout - Visualiser dans une fenêtre à part var res=chaine.replace(/((src\|href)\s=\s")([^"])"/g, function(f,b,m,e){return replacecallback(f,b,m,e)}) __________________ Ma page Developpez Président du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/03/2011, 16h23	#15
fedo2000 Invité de passage Ingénieur développement logiciels Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	Dans le résultat obtenu, les liens en relatif avec un sous-dossier, ex : src = "dossierImages/image.jpg" sont remplacés par src = "http://www.monsite.com/image.jpg" => dossierImages/ a disparu ********************************* Je vois qu'il y a un nouveau code => je teste
	00

31/03/2011, 16h58	#19
fedo2000 Invité de passage Ingénieur développement logiciels Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	je me suis emballé trop rapidement J'ai un soucis avec les espaces : quand il y a des espaces entre les href et les = et les " ca ne fonctionne plus
	00

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