IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Outil de remplacement de lien orphelins


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut 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

  2. #2
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    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

  3. #3
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    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>

  4. #4
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    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^^)

  5. #5
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    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.

  6. #6
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    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.

  7. #7
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Tu t'es quand même bien pris la tête pour rien
    On peut simplifier à mort un code comme celui-ci

    QUand on maîtrise les regexp

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    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>'
    		});
    	}
    }

  8. #8
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Citation Envoyé par Soap17 Voir le message
    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

  9. #9
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Citation Envoyé par dukej Voir le message
    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.
    Ouep c'est vrai, merci pour la fonction, je remplace !

  10. #10
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Citation Envoyé par dukej Voir le message
    Tu t'es quand même bien pris la tête pour rien
    On peut simplifier à mort un code comme celui-ci

    QUand on maîtrise les regexp

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    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>'
    		});
    	}
    }
    Je maitrise pas aussi bien les fonction regex
    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.*"

  11. #11
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Citation Envoyé par dukej Voir le message
    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 !

  12. #12
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    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;
    }

  13. #13
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Citation Envoyé par Soap17 Voir le message
    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;
    }
    Et pourquoi tu n'utilises pas ma fonction ? elle marche tres bien sous IE6. C'est du code basique, simple.

  14. #14
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    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 : 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
    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;
    }

  15. #15
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>'
    });

  16. #16
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Ouep pas mal 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

  17. #17
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Citation Envoyé par Soap17 Voir le message
    Ouep pas mal 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
    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é

  18. #18
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Ouep t'a pas tort

    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 : 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
    /*
    //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 : Sélectionner tout - Visualiser dans une fenêtre à part
    http://www.dailymotion.com/video/xq36uy_max-payne-3-le-bullet-time-fr-hd_videogames?search_algo=1
    est remplacé par ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  19. #19
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    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

  20. #20
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 49
    Par défaut
    Citation Envoyé par dukej Voir le message
    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 !

Discussions similaires

  1. Réponses: 1
    Dernier message: 16/07/2008, 19h46
  2. Quel outil pour remplacer Crystal Report ?
    Par kikidrome dans le forum Autres outils décisionnels
    Réponses: 7
    Dernier message: 23/10/2007, 14h08
  3. Remplacer les liens dans Formview par des boutons
    Par lemagicien dans le forum ASP.NET
    Réponses: 1
    Dernier message: 29/08/2007, 22h33
  4. [DW8] Remplacer les liens de mon site.
    Par matt2006 dans le forum Dreamweaver
    Réponses: 1
    Dernier message: 23/11/2006, 11h44
  5. Réponses: 4
    Dernier message: 04/07/2006, 16h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo