Outil de remplacement de lien orphelins

Version imprimable

19/05/2012, 21h34
Soap17

Outil de remplacement de lien orphelins

Bonjour,

Je m’apprête à développer un outil javascript prennant un string et renvoyant ce même string mais ayant remplacé quelques éléments comme ceci :

- http://truc.png ----> <img src="http://truc.png"/>
- www.truc.com ----> <a href="www.truc.com">www.truc.com</a>
- http://youtube.com/lavideo --> le script youtube permettant d’intégrer la video youtube à un site...
- etc... etc... etc...

Rien de compliqué, mais j'aimerai savoir si quelqu'un a déjà développer ce genre d'outils.

Merci d'avance :lol:

Nan c'est bon je l'ai fait moi même :ccool: :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function LinkReplace(txt)
{
	/*
	 * //Exemple d'utilisation :
	 * var obj = new LinkReplace($('#test').html());
	 * $('#test').html(obj.exec());
	 */
 
	this.setTexte = function(txt)
	{
		this.texte = txt;
	}
 
	this.replace = function(debut, fin, str)
	{
		//On met à jour texte : 
		this.texte = this.texte.substr(0, debut) + str + this.texte.substr(fin + 1, (this.length - 1) - (fin));
		//On met à jour length : 
		//this.length = this.length + (str.length - (fin - debut));
		this.length = this.texte.length;
	}
 
	this.isCaracFin = function(carac)
	{
		for(var i = 0 ; i < this.caracFin.length ; i++)
		{
			if(this.caracFin[i] == carac)
				return true;
		}
		return false;
	}
 
	this.suite = function(debut, str)
	{
		for(var i = 0 ; i < str.length ; i++)
		{
			if(this.texte.charAt(i + debut) != str.charAt(i))
				return false;
		}
		return true;
	}
 
	this.isImage = function(lien)
	{
		var extension = lien.substr(lien.length - 4, 4);
		if(extension == ".jpg" || extension == ".png" || extension == ".gif")
			return true;
		return false;
	}
 
	this.exec = function()
	{
		for(var i = 0 ; i < this.length ; i++)
		{
			var carac = this.texte.charAt(i);
			if(carac == 'h')
			{
				//On prend l'index de debut :
				var debut = i;
				//Si on a du http, on met à jour i :
				if(this.suite(i + 1, "ttp://"))
					i = i + 7;
				//Sinon c'est une autre mise à jour :
				else if(this.suite(i + 1, "ttps://"))
					i = i + 8;
				//Si i a changé, c'est qu'on a bien un lien :
				if(i != debut)
				{
					while(!this.isCaracFin(this.texte.charAt(i)))
						i++;
					var fin = i - 1;
					var lien = this.texte.substr(debut, fin - debut + 1);
					var replace = '';
					if(this.isImage(lien))
						replace = '<img alt="user image" src="' + lien + '"/>';
					/*else if(this.isYoutubeLink(lien))
						replace = 'youuuutube';*/
					else
						replace = '<a href="' + lien + '">' + lien + '</a>';
					i = debut + replace.length;
					this.replace(debut, fin, replace);
				}
			}
			else if(carac == 'w')
			{
				var debut = i;
				if(this.suite(i + 1, "ww."))
					i = i + 4;
				if(i != debut)
				{
					while(!this.isCaracFin(this.texte.charAt(i)))
						i++;
					var fin = i - 1;
					var lien = this.texte.substr(debut, fin - debut + 1);
					var replace = '';
					if(this.isImage(lien))
						replace = '<img alt="user image" src="' + lien + '"/>';
					else
						replace = '<a href="' + lien + '">' + lien + '</a>';
					i = debut + replace.length;
					this.replace(debut, fin, replace);
				}
			}
		}
		this.texte = this.texte.substr(0, this.texte.length - 1);
		return this.texte;
	}
 
	//On met un espace à la fin pour éviter les effet de bord :
	this.texte = txt + ' ';
	this.caracFin = [ '<', '>', '"', "'", '\n', '\r', '\t', ' ' ];
	this.length = this.texte.length;
}

Par contre j'ai pas trouvé de solution fiable pour créer dynamiquement des "embed" ou "object" ou encore "iframe" en fonction d'un lien youtube, dailymotion etc... car le lien ne correspond pas à ce qu'il faut inclure dans la page html... On pourrait mais il faudrait extraire l'id de la vidéo, et la retranscrire dans un nouveau lien différent en fonction de l’hébergeur... Je le ferai si j'ai le temps :aie:

Et c'est compatible ie6 d'apres "ie tab" :mouarf:

Voici ma page de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<script type="text/javascript" src="./jquery/jquery-1.7.2.min.js"/></script>
	</head>
	<body>
		<div id="test">blabla http://test.hayj.free.fr/Autres/photo.png
http://test.hayj.free.fr/Autres/photo.ptrefd
shgsdfvdsgjvf
http://test.hayj.free.fr/Autres/photo.ptrefd'http://test.hayj.free.fr/Autres/photo.ptrefd</div>
		<script>
			function LinkReplace(txt)
			{
				/*
				 * //Exemple d'utilisation :
				 * var obj = new LinkReplace($('#test').html());
				 * $('#test').html(obj.exec());
				 */
 
				this.setTexte = function(txt)
				{
					this.texte = txt;
				}
 
				this.replace = function(debut, fin, str)
				{
					//On met à jour texte : 
					this.texte = this.texte.substr(0, debut) + str + this.texte.substr(fin + 1, (this.length - 1) - (fin));
					//On met à jour length : 
					//this.length = this.length + (str.length - (fin - debut));
					this.length = this.texte.length;
				}
 
				this.isCaracFin = function(carac)
				{
					for(var i = 0 ; i < this.caracFin.length ; i++)
					{
						if(this.caracFin[i] == carac)
							return true;
					}
					return false;
				}
 
				this.suite = function(debut, str)
				{
					for(var i = 0 ; i < str.length ; i++)
					{
						if(this.texte.charAt(i + debut) != str.charAt(i))
							return false;
					}
					return true;
				}
 
				this.isImage = function(lien)
				{
					var extension = lien.substr(lien.length - 4, 4);
					if(extension == ".jpg" || extension == ".png" || extension == ".gif")
						return true;
					return false;
				}
 
				this.exec = function()
				{
					for(var i = 0 ; i < this.length ; i++)
					{
						var carac = this.texte.charAt(i);
						if(carac == 'h')
						{
							//On prend l'index de debut :
							var debut = i;
							//Si on a du http, on met à jour i :
							if(this.suite(i + 1, "ttp://"))
								i = i + 7;
							//Sinon c'est une autre mise à jour :
							else if(this.suite(i + 1, "ttps://"))
								i = i + 8;
							//Si i a changé, c'est qu'on a bien un lien :
							if(i != debut)
							{
								while(!this.isCaracFin(this.texte.charAt(i)))
									i++;
								var fin = i - 1;
								var lien = this.texte.substr(debut, fin - debut + 1);
								var replace = '';
								if(this.isImage(lien))
									replace = '<img alt="user image" src="' + lien + '"/>';
								/*else if(this.isYoutubeLink(lien))
									replace = 'youuuutube';*/
								else
									replace = '<a href="' + lien + '">' + lien + '</a>';
								i = debut + replace.length;
								this.replace(debut, fin, replace);
							}
						}
						else if(carac == 'w')
						{
							var debut = i;
							if(this.suite(i + 1, "ww."))
								i = i + 4;
							if(i != debut)
							{
								while(!this.isCaracFin(this.texte.charAt(i)))
									i++;
								var fin = i - 1;
								var lien = this.texte.substr(debut, fin - debut + 1);
								var replace = '';
								if(this.isImage(lien))
									replace = '<img alt="user image" src="' + lien + '"/>';
								else
									replace = '<a href="' + lien + '">' + lien + '</a>';
								i = debut + replace.length;
								this.replace(debut, fin, replace);
							}
						}
					}
					this.texte = this.texte.substr(0, this.texte.length - 1);
					return this.texte;
				}
 
				//On met un espace à la fin pour éviter les effet de bord :
				this.texte = txt + ' ';
				this.caracFin = [ '<', '>', '"', "'", '\n', '\r', '\t', ' ' ];
				this.length = this.texte.length;
			}
			var obj = new LinkReplace($('#test').html());
			$('#test').html(obj.exec());
		</script>
	</body>
</html>

20/05/2012, 01h56
Willpower

Ca a l'air sympa ce sujet où tu discutes tu seul. :mrgreen:

Bonne chance en tout cas. ;)

edit: je viens de jeter un oeil à fb pour voir comment ils font mais hélas ils font ça coté serveur avec des requêtes du genre : https://www.facebook.com/ajax/metaco...TourStart&nctr[_mod]=pagelet_composer&__user=750599009

quel dégueulasse n’empêche! leurs triples slashes. (enfin, à l'époque j'avais vu des chaines de 13 slashes consécutives chez eux donc, ça va, ça s'améliore^^)
20/05/2012, 03h34
Soap17

C'est ce que je me disais... monologue :mouarf:

xD ok merci pour l'info ! C'est dommage de faire ça coté serveur je trouve...

Edit : si ça intéresse quelqu'un, j'ai fait quelques mise à jour de bug, j'ai aussi ajouté le fait que si le lien est trop long, des "..." sont remplacer vers le milieu du nom du lien.
20/05/2012, 11h39
dukej
Au passage tu peux remplacer la fonction isImage par ça :
Code:

1 2 3 4 5 this.isImage = function(lien) { return /\.(jpe?g|png|gif)$/.test(lien); }
Et en plus je corrige un truc, c'est que ça gère les fichier en .jpeg (ben oui c'est aussi une extension correcte.

Tu t'es quand même bien pris la tête pour rien
On peut simplifier à mort un code comme celui-ci :D

QUand on maîtrise les regexp :D

Voici une ébauche écrite à l'arrache, pour la regexp de l'url j'avais la flème de l'écrire moi même donc je suis allé la chercher sur regexlib.com

Code:

1
2
3
4
5
6
7
8
9
10
 
var linkRegExp = /((\w+)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&amp;%\\$#\=~])*[^\.\,\)\(\s])/g;
var newHTML = str.replace(linkRegExp, function(lien) {
    // is image ?
    if (/\.(jpe?g|png|gif)$/.test(lien)) {
        return '<img alt="user image" src="' + lien + '"/>';
    }
 
    return '<a href="' + lien + '">' + lien + '</a>'
});

Pour tester : http://jsfiddle.net/pYudh/3/

Et en réintégrant le code dans ton objet, ça nous donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function LinkReplace(txt)
{
	this.text = txt;
 
 
	this.exec = function() {
		var linkRegExp = /((\w+)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&amp;%\\$#\=~])*[^\.\,\)\(\s])/g;
		return this.text.replace(linkRegExp, function(lien) {
		    // is image ?
		    if (/\.(jpe?g|png|gif)$/.test(lien)) {
		        return '<img alt="user image" src="' + lien + '"/>';
		    }
 
		    return '<a href="' + lien + '">' + lien + '</a>'
		});
	}
}

20/05/2012, 13h31
dukej

Citation:

Envoyé par Soap17

Et c'est compatible ie6 d'apres "ie tab" :mouarf:

Voici ma page de test :

ATTENTION !! Ce n'est pas parce que tu as ietab qu'il ouvre ta page sous IE6. Il ouvre la page sous le moteur du IE qui est installé sur ta machine, c'est très différent. Utilise au pire IETester pour tester sous IE6. Mais de toute façon un code aussi simple que celui-ci fonctionne sous IE6
20/05/2012, 18h17
Soap17
Citation:
Envoyé par dukej

Au passage tu peux remplacer la fonction isImage par ça :

Code:

1 2 3 4 5 this.isImage = function(lien) { return /\.(jpe?g|png|gif)$/.test(lien); }

Et en plus je corrige un truc, c'est que ça gère les fichier en .jpeg (ben oui c'est aussi une extension correcte.
Ouep c'est vrai, merci pour la fonction, je remplace !

Citation:
Envoyé par dukej
Tu t'es quand même bien pris la tête pour rien
On peut simplifier à mort un code comme celui-ci :D

QUand on maîtrise les regexp :D

Voici une ébauche écrite à l'arrache, pour la regexp de l'url j'avais la flème de l'écrire moi même donc je suis allé la chercher sur regexlib.com
Code:

1 2 3 4 5 6 7 8 9 10 var linkRegExp = /((\w+)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&%\\$#\=~])*[^\.\,\)$\s])/g; var newHTML = str.replace(linkRegExp, function(lien) { // is image ? if (/\.(jpe?g|png|gif)$/.test(lien)) { return '<img alt="user image" src="' + lien + '"/>'; } return '<a href="' + lien + '">' + lien + '</a>' });
Pour tester : http://jsfiddle.net/pYudh/3/

Et en réintégrant le code dans ton objet, ça nous donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function LinkReplace(txt) { this.text = txt; this.exec = function() { var linkRegExp = /((\w+)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&%\\$#\=~])*[^\.\,$\(\s])/g; return this.text.replace(linkRegExp, function(lien) { // is image ? if (/\.(jpe?g|png|gif)$/.test(lien)) { return '<img alt="user image" src="' + lien + '"/>'; } return '<a href="' + lien + '">' + lien + '</a>' }); } }
Je maitrise pas aussi bien les fonction regex :cry:
Au départ je cherchai à faire ceci mais la fonction "replace(regex, function)" m'a échappé !
Cette fonction marche pour tous lien avec des "://" si j'ai bien compris. Personnellement je la modifierai pour qu'elle n'accepte que les "http://*" et les "https://*" et qu'elle gère les "www.*"

20/05/2012, 18h29
Soap17

Citation:

Envoyé par dukej

ATTENTION !! Ce n'est pas parce que tu as ietab qu'il ouvre ta page sous IE6. Il ouvre la page sous le moteur du IE qui est installé sur ta machine, c'est très différent. Utilise au pire IETester pour tester sous IE6. Mais de toute façon un code aussi simple que celui-ci fonctionne sous IE6

Merci pour l'info. Sous ie tester (ie6), ça marche aussi !

Par contre la fonction isImage ne marche pas sous ie6, donc je me suis pas embêté, j'ai enlevé le '.' de jpeg :
Code:

1 2 3 4 5 6 7 this.isImage = function(lien) { var extension = lien.substr(lien.length - 4, 4); if(extension == ".jpg" || extension == ".png" || extension == ".gif" || extension == "jpeg") return true; return false; }

Citation:
Envoyé par Soap17
Par contre la fonction isImage ne marche pas sous ie6, donc je me suis pas embêté, j'ai enlevé le '.' de jpeg :
Code:

1 2 3 4 5 6 7 this.isImage = function(lien) { var extension = lien.substr(lien.length - 4, 4); if(extension == ".jpg" || extension == ".png" || extension == ".gif" || extension == "jpeg") return true; return false; }
Et pourquoi tu n'utilises pas ma fonction ? elle marche tres bien sous IE6. C'est du code basique, simple.

8O effectivement, j'ai retesté et ça marche (je devais avoir un problème autre part quand j'ai testé tout à l'heure !)

Bon en fait j'ai gérer les vidéo youtube et dailymotion et ça marche très bien, voici le dernière version :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
function LinkReplace(txt)
{
	/*
	 * //Exemple d'utilisation :
	 * var obj = new LinkReplace($('#test').html());
	 * $('#test').html(obj.exec());
	 */
 
	this.setTexte = function(txt)
	{
		this.texte = txt + ' ';
		this.length = this.texte.length;
	}
 
	this.replace = function(debut, fin, str)
	{
		//On met à jour texte : 
		this.texte = this.texte.substr(0, debut) + str + this.texte.substr(fin + 1, (this.length - 1) - (fin));
		//On met à jour length : 
		//this.length = this.length + (str.length - (fin - debut));
		this.length = this.texte.length;
	}
 
	this.isCaracFin = function(carac)
	{
		for(var i = 0 ; i < this.caracFin.length ; i++)
		{
			if(this.caracFin[i] == carac)
				return true;
		}
		return false;
	}
 
	this.isCaracFinIdVideo = function(carac)
	{
		for(var i = 0 ; i < this.caracFinIdVideo.length ; i++)
		{
			if(this.caracFinIdVideo[i] == carac)
				return true;
		}
		return false;
	}
 
	this.suite = function(debut, str)
	{
		for(var i = 0 ; i < str.length ; i++)
		{
			if(this.texte.charAt(i + debut) != str.charAt(i))
				return false;
		}
		return true;
	}
 
	this.isImage = function(lien)
	{
		var extension = lien.substr(lien.length - 4, 4);
		if(extension == ".jpg" || extension == ".png" || extension == ".gif" || extension == "jpeg")
			return true;
		return false;
	}
 
	this.isImageV2 = function(lien)
	{
		return /\.(jpe?g|png|gif)$/.test(lien);
	}
 
	this.isYoutubeLink = function(lien)
	{
		return lien.indexOf("http://www.youtube.com/watch?v=", 0) == 0;
	}
 
	this.isDailymotionLink = function(lien)
	{
		return lien.indexOf("http://www.dailymotion.com/video/", 0) == 0;
	}
 
	this.createIframeYoutube = function(lien)
	{
		var id = '';
		//Tant que ce n'est pas la fin du lien et que ce n'est pas la fin de l'id, on ajoute les caractères :
		for(var i = 31 ; i < lien.length && !this.isCaracFinIdVideo(lien.charAt(i)) ; i++)
			id += lien.charAt(i);
		return '<iframe width="500" height="350" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
	}
 
	this.createIframeDailymotion = function(lien)
	{
		var id = '';
		for(var i = 33 ; i < lien.length && !this.isCaracFinIdVideo(lien.charAt(i)) && lien.charAt(i) != '_' ; i++)
			id += lien.charAt(i);
		return '<iframe frameborder="0" width="500" height="350" src="http://www.dailymotion.com/embed/video/' + id + '"></iframe>';
	}
 
	this.exec = function()
	{
		for(var i = 0 ; i < this.length ; i++)
		{
			var carac = this.texte.charAt(i);
			if(carac == 'h')
			{
				//On prend l'index de debut :
				var debut = i;
				//Si on a du http, on met à jour i :
				if(this.suite(i + 1, "ttp://"))
					i = i + 7;
				//Sinon c'est une autre mise à jour :
				else if(this.suite(i + 1, "ttps://"))
					i = i + 8;
				//Si i a changé, c'est qu'on a bien un lien :
				if(i != debut)
				{
					while(!this.isCaracFin(this.texte.charAt(i)))
						i++;
					var fin = i - 1;
					var lien = this.texte.substr(debut, fin - debut + 1);
					var nom = lien;
					if(lien.length > 70)
							nom = lien.substr(0, 35) + "..." + lien.substr(lien.length - 20, 20)
					var replace = '';
					if(this.isImageV2(lien))
						replace = '<img alt="user image" src="' + lien + '"/>';
					else if(this.isYoutubeLink(lien))
						replace = this.createIframeYoutube(lien);
					else if(this.isDailymotionLink(lien))
						replace = this.createIframeDailymotion(lien);
					else
						replace = '<a href="' + lien + '">' + nom + '</a>';
					i = debut + replace.length;
					this.replace(debut, fin, replace);
				}
			}
			else if(carac == 'w')
			{
				var debut = i;
				if(this.suite(i + 1, "ww."))
					i = i + 4;
				if(i != debut)
				{
					while(!this.isCaracFin(this.texte.charAt(i)))
						i++;
					var fin = i - 1;
					var lien = "http://" + this.texte.substr(debut, fin - debut + 1);
					var nom = lien;
					if(lien.length > 70)
						nom = lien.substr(0, 40) + "..." + lien.substr(lien.length - 17, 17)
					var replace = '';
					if(this.isImage(lien))
						replace = '<img alt="user image" src="' + lien + '"/>';
					else
						replace = '<a href="' + lien + '">' + nom + '</a>';
					i = debut + replace.length;
					this.replace(debut, fin, replace);
				}
			}
		}
		this.texte = this.texte.substr(0, this.texte.length - 1);
		return this.texte;
	}
 
	//On met un espace à la fin pour éviter les effets de bord :
	this.texte = txt + ' ';
	this.caracFin = [ /*'<', '>',*/ '"', "'", '\n', '\r', '\t', ' ' ];
	this.caracFinIdVideo = [ '&' ];
	this.length = this.texte.length;
}

J'ai corrigé mon code :

Il prend en compte que les http et https et prend aussi en compte www.

et si c'est www. il rajoute http:// dans le cas ou c'est le src de l'image ou le lien mais laisse www. affiché dans le label du lien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
 
var linkRegExp = /((https?\:\/\/|www\.)[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&amp;%\\$#\=~])*[^\.\,\)\(\s])/g;
var newHTML = str.replace(linkRegExp, function(lien) {
    var lienWithHttp = lien.replace(/^www/, 'http://www');
    // is image ?
    if (/\.(jpe?g|png|gif)$/.test(lien)) {
        return '<img alt="user image" src="' + lienWithHttp + '"/>';
    }
 
 
    return '<a href="' + lienWithHttp + '">' + lien + '</a>'
});

20/05/2012, 22h27
Soap17

Ouep pas mal :mouarf: mais bon j'ai préféré gérer les vidéos avec mon code !

Pour ceux que ça intéresse, je met à jour régulièrement (vidéos Vimeo...)

En tout cas merci de ton aide dukej :ccool:
20/05/2012, 22h31
dukej

Citation:

Envoyé par Soap17

Ouep pas mal :mouarf: mais bon j'ai préféré gérer les vidéos avec mon code !

Pour ceux que ça intéresse, je met à jour régulièrement (vidéos Vimeo...)

En tout cas merci de ton aide dukej :ccool:

ouais, enfin tu peux jeter ton code, et tu as juste à gérer à l'intérieur de la fonction replace, et de faire une simple de détection à chaque fois si c'est du youtube ou autre et c'est torché.

Ton code est aussi facile à maintenir que du code obfusqué

Ouep t'a pas tort :D

Bon au final j'ai fait un objet propre (voir ce tuto : http://t-templier.developpez.com/tut...ipt-poo1/#L1.1 ) et j'ai utilisé les regex (donc ton code, merci encore).

Voici la dernière version qui fonctionne parfaitement bien même sous ie6 (iframe vimeo, youtube et dailymotion géré) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
//Exemple d'utilisation :
var obj = new LinkReplace($('#test').html());
$('#test').html(obj.exec());
obj.texte = $('#test2').html();
$('#test2').html(obj.exec());...
 
//Test html :
Max Payne 3 :
http://www.rockstargames.com/maxpayne3/news/article/max-payne-3-now-available-in-europe-and-australia-for-ps3-and-xb.html
http://www.maxpayne3.fr/
www.maxpayne.com
http://www.extremgames.fr/wp/wp-content/uploads/max-payne-3-trailer.jpg
http://www.youtube.com/watch?v=0Bj27D-Ew9U&feature=fvst
http://www.dailymotion.com/video/xq36uy_max-payne-3-le-bullet-time-fr-hd_videogames?search_algo=1
http://vimeo.com/35845407
*/
 
var LinkReplace = function(txt)
{
	//Initialisation de l'objet :
	LinkReplace.initialized = false; 
 
	//Initialisation des fonctions :
	if(LinkReplace.initialized == false) { LinkReplace.prototype.replace = function(lien)
	{
		this.isImage = function(lien)
		{
			return /\.(jpe?g|png|gif)$/.test(lien);
		}
 
		this.isYoutubeLink = function(lien)
		{
			return lien.indexOf("http://www.youtube.com/watch?v=", 0) == 0;
		}
 
		this.isDailymotionLink = function(lien)
		{
			return lien.indexOf("http://www.dailymotion.com/video/", 0) == 0;
		}
 
		this.isVimeoLink = function(lien)
		{
			return lien.indexOf("https://vimeo.com/", 0) == 0 || lien.indexOf("http://vimeo.com/", 0) == 0;
		}
 
		this.createIframeYoutube = function(lien)
		{
			var id = '';
			//Tant que ce n'est pas la fin du lien et que ce n'est pas la fin de l'id, on ajoute les caractères :
			for(var i = 31 ; i < lien.length && lien.charAt(i) != '&' ; i++)
				id += lien.charAt(i);
			return '<iframe width="500" height="350" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
		}
 
		this.createIframeDailymotion = function(lien)
		{
			var id = '';
			for(var i = 33 ; i < lien.length && lien.charAt(i) != '&' && lien.charAt(i) != '_' ; i++)
				id += lien.charAt(i);
			return '<iframe frameborder="0" width="500" height="350" src="http://www.dailymotion.com/embed/video/' + id + '"></iframe>';
		}
 
		this.createIframeVimeo = function(lien)
		{
			//Si c'est du https, il faut changer "debut" :
			var debut = 18;
			if(lien.charAt(4) == 's')
				debut = 19;
 
			var id = '';
			for(var i = 18 ; i < lien.length && lien.charAt(i) != '&' ; i++)
				id += lien.charAt(i);
			return '<iframe src="http://player.vimeo.com/video/' + id + '" width="500" height="350" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
		}
 
		//Si le nom est trop grand, on le rétrécie :
		var nom = lien;
		if(lien.length > 70)
			nom = lien.substr(0, 40) + "..." + lien.substr(lien.length - 17, 17)
 
		//Si c'est des "www.", on ajoute "http://" :
		if(lien.charAt(0) == 'w')
			lien = "http://" + lien;
 
		//On creer la variable replace qui remplacera le lien :
		var replace = '';
		if(this.isImage(lien))
			replace = '<img alt="user image" src="' + lien + '"/>';
		else if(this.isYoutubeLink(lien))
			replace = '<div class="user_video">' + this.createIframeYoutube(lien) + '<a href="' + lien + '">' + nom + '</a></div>';
		else if(this.isDailymotionLink(lien))
			replace = '<div class="user_video">' + this.createIframeDailymotion(lien) + '<a href="' + lien + '">' + nom + '</a></div>';
		else if(this.isVimeoLink(lien))
			replace = '<div class="user_video">' + this.createIframeVimeo(lien) + '<a href="' + lien + '">' + nom + '</a></div>';
		else
			replace = '<a href="' + lien + '">' + nom + '</a>';
 
		//On retourne le lien balisé :
		return replace;
	};}
 
	if(LinkReplace.initialized == false) { LinkReplace.prototype.exec = function()
	{
		//Les fonction utilisées par replace doivent être créées dans replace :
		this.texte = this.texte.replace(this.linkRegExp, this.replace);
		return this.texte;
	};}
 
	//Initialisation des variables de classe :
	this.texte = txt;
	this.linkRegExp = /((https?\:\/\/|www\.)[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&amp;%\\$#\=~])*[^\.\,\)\(\s])/g;
 
	//L'objet est initialisé, les fonctions ne seront pas recréées pour chaque instances :
	LinkReplace.initialized = true; 
}

Pour les video, un lien de ce type :

Code:

http://www.dailymotion.com/video/xq36uy_max-payne-3-le-bullet-time-fr-hd_videogames?search_algo=1

est remplacé par ceci :

Code:

1
2
3
4
5
6
7
<div class="user_video">
	<iframe width="500" height="350" frameborder="0" src="http://www.dailymotion.com/embed/video/xq36uy">
	</iframe>
	<a href="http://www.dailymotion.com/video/xq36uy_max-payne-3-le-bullet-time-fr-hd_videogames?search_algo=1">
		http://www.dailymotion.com/video/xq36uy_...mes?search_algo=1
	</a>
</div>

21/05/2012, 09h31
dukej

Dans le replace tu trimballes une variable replace, elle ne sert à rien, tu fais un return directement dans le if, c'est aussi efficace. Tu aurais du t'inspirer au maximum de mon code
21/05/2012, 21h12
Soap17

Citation:

Envoyé par dukej

Dans le replace tu trimballes une variable replace, elle ne sert à rien, tu fais un return directement dans le if, c'est aussi efficace. Tu aurais du t'inspirer au maximum de mon code

Pas faux, enfin bon, c'est qu'un détail !
25/05/2012, 01h08
Soap17

Re, ton regex ne marche pas pour les liens du type

http://127.0.0.1/sha/image/charte/logo.png

c'est normal ?

Edit : ouai c'est à cause de l'extension, j'ai changé le regex

Code:

var linkRegExp = /((https?\:\/\/|www\.)[a-zA-Z0-9\-\.]+(:[a-zA-Z0-9]*)?\/?([a-zA-Z0-9\-\._\?\,\'\/\\\+&%\\$#\=~])*[^\.\,\)\(\s])/g;