images, css et liens : relatif => absolu

Version imprimable

31/03/2011, 11h25
fedo2000

images, css et liens : relatif => absolu

Bonjour !

Je vous explique mon problème en espérant trouver de l'aide ici :lol:
Je dois réaliser un javascript (je pensais à une regex mais c'est un point faible pour moi :oops: ) 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 !

Code:

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>

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

Code:

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
}

je penserait plutot a quelquechose comme ca

Code:

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

31/03/2011, 12h25
SpaceFrog

Citation:

Etant donné une chaine

tu veux traiter une chaine ou le code html de ta page .?
31/03/2011, 12h28
javatwister

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

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

Code:

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é

Hello,

Tout d'abord merci pour vos réponses :ccool:
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 8O
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:

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.

ha c'est l'inverse :oops:
là je retire le http

Code:

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>

Hello,

On est pas loin :D

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

:?
Citation:
Envoyé par SpaceFrog
ha c'est l'inverse :oops:
là je retire le http
Code:

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>

pour le 1)

Code:

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

Code:

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>

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

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

:calim2:
Citation:
Envoyé par SpaceFrog
Code:

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>

pas compris :red:

Code:

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>

31/03/2011, 16h23
fedo2000

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

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

Je vois qu'il y a un nouveau code => je teste :lol:
31/03/2011, 16h31
SpaceFrog

avec la dernière version ?

J'ai juste modifié :
Code:

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

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

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

31/03/2011, 16h46
SpaceFrog

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

En revanche tu as bien compris la solution proposée
:ccool:
31/03/2011, 16h58
fedo2000

:oops: je me suis emballé trop rapidement :P
J'ai un soucis avec les espaces : quand il y a des espaces entre les href et les = et les " ca ne fonctionne plus :calim2:
31/03/2011, 17h01
SpaceFrog

Code:

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

Super Merci ca marche ! :ccool:
01/04/2011, 10h24
fedo2000

Je vais vous faire peter un cable :roll:
Il y a un souci lorsque les arguments sont entre quote...
src='toto.jpg', ca ne marche plus..
Mea culpa, j'aurais du le preciser :aie:
01/04/2011, 10h47
SpaceFrog

Code:

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

allez je tente le coup de mon côté, depuis le temps que j'ai lâché le sujet...

Code:

alert(chaine.replace(/(src|href)(\s*=\s*['"])([^:'"]+['"])/gi,"$1$2"+adr+"$3"))
01/04/2011, 15h22
fedo2000

:ccool: Manque plus que les css où l'on a :
url(toto.jpg) ou url('toto.jpg') ou url("toto.jpg") à mettre en absolu => url(http://www.monsite.com/toto.jpg) et le sujet sera clos !!:aie:
01/04/2011, 16h11
fedo2000

En ne considérant seulement les url() et pas les href et src, j'ai fais une tentative avec

Code:

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

Mais ca marche pas trés bien...8O
02/04/2011, 07h19
javatwister

Code:

alert(chaine.replace(/(src|href|url)(\s?[=(]['"\s]*)([^:'"\s]+['"\s>])/gi,"$1$2"+adr+"$3"))

fonctionne avec les chaînes les plus mal foutues!

une remarque: je ne sais pas où tu puises ces "chaînes" mais il serait bon de profiter du replace pour les normaliser, non?
11/04/2011, 12h09
fedo2000

Merci javatwister, tu assures !!!

Fuseau horaire GMT +2. Il est actuellement 06h55.