Outil de remplacement de lien orphelins

**Soap17** · 19/05/2012, 21h34

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

**Soap17** · 20/05/2012, 00h22

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

:

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

**Soap17** · 20/05/2012, 00h25

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

Voici ma page de test :

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

**Willpower** · 20/05/2012, 01h56

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

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

**Soap17** · 20/05/2012, 03h34

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

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.

**dukej** · 20/05/2012, 11h39

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

Code :

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

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.

**dukej** · 20/05/2012, 13h31

Envoyé par Soap17

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

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

**Soap17** · 20/05/2012, 18h29

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 !

**Soap17** · 20/05/2012, 18h35

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

Code :

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

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

Outil de remplacement de lien orphelins

JavaScript

Vue hybride

Discussions similaires

Partager

Partager