[JavaScript] [SRC] Classe utilitaire pour la manipulation des URLs

[Oscar Hiboux]

Salut,

Voici une petite classe pratique pour la manipulation des URLs. On peut l'utiliser de bien des façons - cf. les exemples ensuite.

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
URL = {
    /**
     * function {public string} ? Returns a parameter from the given URL according its name.
     * If no path is provided, the current page URL is used and the arguments are all shifted one the left.
     */
    getParameter: function(path, name) {
        if(arguments.length < 2) {
            name = path;
            path = window.location.href;
        }
        var value = null;
        var capture = path.match(new RegExp("[\\?&]" + name + "=([^&#]*)"));
        if(capture) {
            value  = unescape(capture[1]);
        }
        return value;
    },
 
    /**
     * function {public string} ? Sets a parameter in the given URL and returns a new string.
     * If no path is provided, the current page URL is used and the arguments are all shifted one the left.
     */
    setParameter: function(path, name, value) {
        if(arguments.length < 3) {
            value = name;
            name = path;
            path = window.location.href;
        }
        var result = path;
 
        // Remove the parameter if it already exists.
        if(URL.getParameter(path, name)) {
            result = URL.removeParameter(path, name);
        }
 
        // If the URL contains parameters, add the parameter after '&'
        if(result.indexOf("?") > -1) {
            result += "&";
        }
        else {
            // If the URL does not contain any parameter, add the parameter after '?'
            result += "?";
        }
 
        result += name + "=" + value;
 
        return result;
    },
 
    /**
     * function {public string} ? Sets some parameters in the given URL and returns a new string.
     * If no path is provided, the current page URL is used and the arguments are all shifted one the left.
     */
    setParameters: function(path, parameters) {
        if(arguments.length < 2) {
            parameters = path;
            path = window.location.href;
        }
        var result = path;
        $H(parameters).each(function(iterator) {
            result = URL.setParameter(result, iterator.key, iterator.value);
        });
 
        return result;
    },
 
    /**
     * function {public string} ? Returns a parameter from the given URL according its name.
     * If no path is provided, the current page URL is used and the arguments are all shifted one the left.
     */
    removeParameter: function(path, name) {
        if(arguments.length < 2) {
            name = path;
            path = window.location.href;
        }
        var result = path;
 
        if(URL.getParameter(path, name)) {
            var index = path.indexOf("?");
            var result = path.substring(0, index);
            if(index > -1) {
                parameters = path.substring(index + 1).split("&");
                var parameter;
                var first = true;
                for(index = 0; index < parameters.length; index++) {
                    parameter = parameters[index];
                    if(parameter.split("=")[0] != name) {
                        if(first) {
                            result += "?";
                            first = false;
                        }
                        else {
                            result += "&";
                        }
                        result += parameter;
                    }
                }
            }
        }
 
        return result;
    },
 
    go: function(path, parameters) {
        path = path || window.location.href;
        if(parameters) {
            path = URL.setParameters(path, parameters);
        }
        window.location.href = path;
    },
 
    /** function {public string} ? Returns the current page URL. */
    get: function() {
        return window.location.href;
    },
 
    pattern: /^(?:(ftp|https?)\:\/\/|~\/|\/)?(?:(\w+):(\w+)@)?((?:[-\w]+\.)+(?:[a-z]+))(?::([\d]{1,5}))?((?:(?:\/(?:[-\w~!$+|.,=]|%[a-f\d]{2})+)+|\/)+|\?|#)?((?:\?(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)(?:&(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)*)*(?:#((?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*))?$/,
 
    getHost: function(path) {
        var host = null;
 
        var capture = path.match(URL.pattern);
        if(capture) {
            host = capture[4];
        }
 
        return host;
    }
};

(les commentaires sont mis en forme pour JGrooseDoc; je crois que c'est semblable à JSDoc mais je ne connais pas encore très bien les utilitaires de documentation JavaScript)

- Exemples :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
URL.getParameter("forum"); // retourne le paramètre "forum" dans l'URL de la page courante
 
URL.getParameter("http://www.developpez.com/?forum=JavaScript", "forum"); // retourne "JavaScript"
 
URL.setParameter("forum", "JavaScript"); // retourne l'URL de la page courante dans laquelle le paramètre "forum" prend la valeur "JavaScript"
 
URL.setParameter("http://www.developpez.com", "forum", "JavaScript"); // retourne "http://www.developpez.com?forum=JavaScript"
 
URL.setParameter("http://www.developpez.com/?forum=PHP", "forum", "JavaScript"); // retourne "http://www.developpez.com/?forum=JavaScript"
 
URL.setParameters({"green": "apple", "yellow": "banana", "pink": "litchi"}); // retourne l'URL de la page courante dans laquelle les paramètres "green", "yellow" et "pink" prennent les valeurs "apple", "banana" et "litchi"
 
URL.get(); // retourne l'URL de la page courante
 
URL.go("www.devloppez.com") // déclenche le chargement de la page à l'adresse "www.developpez.com"
 
URL.go("www.devloppez.com", {"forum": "JavaScript", "post": 16}) // déclenche le chargement de la page à l'adresse "www.developpez.com/?forum=JavaScript&post=16"
 
URL.getHost("http://www.developpez.com/?forum=JavaScript"); // retourne "www.developpez.com"

[Oscar Hiboux]

Voilà, j'ai mis à jour les exemples d'usages. Si vous avez d'autres idées n'hésitez pas à les proposer !

[bucheron007]

hello,
merci pour ton boulot.

C'est exactement ce que je recherche.

Par contre je cherche le meme genre mais avec l'utilisation de jquery.
Quelqu'un sait il ou je peux trouver ça ?

[bucheron007]

en fait je viens de regarder et tester d'un plus près cette classe.
Et elle fonctionne à merveille.


je vois pas trop pourquoi tu parles de prototype ? car je ne trouve pas de référence à prototype ?

[Oscar Hiboux]

Content que ça t'ait plu !

En effet, je viens de parcourir rapidos le contenu du code et il n'y a pas l'air d'avoir une quelconque référence à prototype.js. Je pense que j'en ai parlé pour ma décharge, des fois que quelque chose m'aurait échappé... ^^'

[Oscar Hiboux]

Je viens d'ajouter une p'tite méthode à la classe pour simplifier la récupération du nom de l'hôte qui figure dans l'URL. J'utilise une expression régulière assez longue qui n'est pas encore complète à 100%. Actuellement elle ne convient ni aux URL relatives (sans protocole, nom d'hôte et port) ni à celles faisant apparaître une IP en guise d'hôte. J'arrangerai ça rapidement !

Autrement elle capture, dans cet ordre : (1) protocole, (2) utilisateur, (3) mot de passe, (4) hôte, (5) port, (6) ressource, (7) paramètres, (8) ancre.

Exemple : http://mickey:pwd@sketch.disney.com:80/classroom.php?id=1#board
(1) "http", (2) "mickey", (3) "pwd", (4) "sketch.disney.com", (5) "80", (6) "/classroom.php", (7) "?id=1", (8) "board"

La méthode URL#getHost retourne simplement le quatrième groupe de capture. L'implémentation des autres est donc très simple mais je ne l'ai pas fait pour l'instant. D'ici là mon p'tit blabla devrait pouvoir vous guider si vous en aviez un besoin urgent.

P.S. : j'ai rajouté un exemple dans les cas déjà présents dans mon premier message.

[Dominique49]

Salut, cette classe est effectivement très intéressante ... mais je crois qu'il lui manque une fonction très importante, qui serait une sorte de concaténation "intelligente". Par exemple :

URL.concat('http://monsite.com/tutos/index.php', '../../forums/');

devrait donner : 'http://monsite.com/forums/'

Ne croyez vous pas que ce serait très utile ?

[Oscar Hiboux]

Effectivement, certains pourraient avoir besoin d'une telle fonctionalité. Par contre, j'appellerais ça "resolve" plutôt que "concat"...