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
}

Invité · 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

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;

Invité · 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:

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

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"

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

images, css et liens : relatif => absolu

JavaScript

Discussions similaires

Partager

Partager