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>

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

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

images, css et liens : relatif => absolu

JavaScript

Vue hybride

Discussions similaires

Partager

Partager