Une classe javascript pour parser location.search

Une fonction javascript pour parser location.search

Pourquoi QSParser ?

Tous a commencer par une simple question comment déterminer si une variable existe ou non dans une url ?. Et voilà que non satisfait des solutions proposées et ne trouvant pas le sommeil ce week-end, j'ai mis au point ce script. Je vous présente donc QSParser, une fonction javascript qui permet de manipuler entre autre window.location.searchi de Javascript et d'assigner, de modifier et d'effacer les variables qu'elle contient. Si au premier abord on peut se demander à quoi peut bien servir cette fonction... en y réflchissant de plus près cette fonction mime le remplissage et l'envoi d'un formulaire en méthode GET.... sans formulaire. Quoi qu'il en soit je suis assez fier de cette fonction car c'est l'une de mes premières réalisations 100% en javascript sans utilisation de W3CDOM, dingue non !!!

la classe window.location de Javascript

Avant d'expliquer ma fonction QSParser, je tiens à expliquer la classe location de javascript pour les non initiés elle possède des infos que l'on n'exploite pas toujours dommage. utiliser le lien ci-dessous avant de lire les explications, car location va nous permettre d'accéder à différentes parties de cette URL.

cliquer d'abord sur le lien suivant : de test de window.location

les différentes propriétés et méthodes de window.location
propriétédescription
  • bien sur pour que les différentes propriétés renvoient une chaîne de caractère il faut que celle-ci soit présente dans l'url c'est-à-dire dans location.href
  • Pour voir la différence entre window.location.host et window.location.hostname , il faut éxécuter cette page sous Opera, du moins c'est le seul navigateur testé qui rends compte réellement de la différrence entre les 2 propriété : dans le cas de location.hostname le numéro du port doit également être indiqué si il est présent. N'ayant pas de Mac sous la main je ne connais pas le comportement de Safari.
window.location.protocolindique le protocole qu'utilise l'URI.
window.location.hostindique le nom du serveur qu'utilise l'URI
window.location.hostnameindique le nom du serveur qu'utilise l'URI
window.location.pathnameindique le chemin d'accès à la page chargée par l'URI
window.location.searchindique la requête envoyé au serveur.
window.location.hashindique la partie sélectionnée de la page chargée par l'URI
window.location.hrefindique la totalité de l'URI
window.location.portindique le port utilisée par le serveur
window.location.reload()recharge la page courante équivalent de actualiser/recharger de votre page
window.location.replace(uri)charge la page uri et efface la page actuelle de l'historique de votre navigateur
window.location=uricharge la page uri dans votre navigateur

QSParser mode d'emploi

init([string:url][, bool:debug]) :
Initialise QSParser. Si url n'est pas fourni ou si ce n'est pas une chaîne de caractères, la fonction s'initialise avec location.search.
Comme je suis un développeur j'ai ajouté une variable debug qui est un booléen. Si debug = true, elle permet d'afficher certains résultatis à l'écran... c'est un débug en forme d'alerte...
setVariable( string:variable_nom , variable_valeur ):
qui permet d'ajouter, de changer et d'effacer une variable. cette methode accepte 2 paramètres :
  • variable_nom : qui est le nom de la variable. variable_nom est obligatoirement une chaîne de caractères;
  • variable_valeur : qui représente la valeur qu'on assigne.variable_valeur peut être une chaîne de caractère , un tableau ou un objet;

setVariable a des limitations... Elle ne prendra en compte que des tableaux/objets d'une dimension.

removeVariable( string:variable_nom ):
qui permet d'effacer une variable. cette methode accepte 1 paramètre :
  • variable_nom : qui est le nom de la variable. variable_nom est obligatoirement une chaîne de caractères;
getVariable(string:variable_nom) :
qui permet de récupérer la donnée d'une variable présente dans la query string
getQueryString() :
qui permet de récupérer la requête formatée et prète à l'emploi.
reset() :
qui permet de réinitialiser la requête à ses valeurs de base, similaire à la méthode reset() dans un formulaire
setURL([url]) :
Cette méthode permet de charger la page url avec la requête que l'on vient de créer. si url n'est pas fourni, c'est la page courante qui sera rechargée.

QSParser en action

Testons la fonction QSParser.js à l'aide de la variable testQSParser :

var testQSParser = function () {
 	QSParser.init('?toto=truc&test[]=1&test[]=2&test1[toi]=moi&test1[moi]=toi',true);
 	QSParser.getQueryString();
 	QSParser.setVariable('example1','\xe0 conserver');
 	QSParser.setVariable('example2','\xe0 virer');
 	QSParser.setVariable('aliens',['ET','predator','freeza','brainiac','galactus']);
 	QSParser.setVariable('alien',{'qui':'ET','quoi':'telephoner','ou':'maison'});
 	QSParser.getQueryString(); 
 	QSParser.getVariable('test1');
 	QSParser.getVariable('test');
 	QSParser.removeVariable('example2');
 	QSParser.getQueryString();
 	QSParser.reset();
 	QSParser.setURL();
);

Tout d'abord on assigne à la variable testQSParser une fonction anonyme, c'est la ligne #1 du code. Ensuite les chose intéressantes commence, à la ligne #2 on initialise la fonction avec une variable et la seconde valeur à true afin d'utiliser les debug de la fonction.

var testQSParser = function () {
 	QSParser.init('?toto=truc&test[]=1&test[]=2&test1[toi]=moi&test1[moi]=toi',true);

Comme nous sommes parties d'une requete on peut déjà à ce moment voir ce que la classe a garder comme paramètres.

03 	QSParser.getQueryString();

Les 4 lignes suivantes sont des exemples d'assignation de variable à la fonction, le mode debug nous montre bien que les variables sont bien assigner dans le cas des chaînes de caractès comme dans ceux des tableaux et des objets à une dimension. Enfin un récapitulatif des variables et des données est effectué grâce à queryString() en ligne #8

 	QSParser.setVariable('example1','\xe0 conserver');
 	QSParser.setVariable('example2','\xe0 virer');
 	QSParser.setVariable('aliens',['ET','predator','freeza','brainiac','galactus']);
 	QSParser.setVariable('alien',{'qui':'ET','quoi':'telephoner','ou':'maison'});
 	QSParser.getQueryString();
remarques au sujet du Javascript
  • En Javascript, les caractères sont codés en UTF-8 c'est pourquoi à s'écrit \xe0
  • il existe 2 manières de déclarer un tableau :
    • la manière historique : var tableau = new Array('val1','val2');
    • la manière simplifiée : var tableau = ['val1','val2'];
  • il existe 2 manières de déclarer un objet :
    • la manière historique :
      var obj = new Object();
      obj.moi = me;
      obj.toi = you;
    • la manière simplifiée : var obj = {'moi':'me','toi':'you'};

Les 2 lignes qui suivent, nous montre que la fonctions capable de récupérer les variables de la requêtes mais lorsque ceux-ci on appartiennent à la chaînes d'entrées.

 	QSParser.getVariable('test1');
 	QSParser.getVariable('test');

Les 2 lignes qui suivent, nous montre que la méthode QSParser.removeVariable() est fonctionnelle et que la variable disparait complètement de la requête.

 	QSParser.removeVariable('example2');
 	QSParser.getQueryString();

Enfin les 3 dernières lignes nous permettent d'utiliser les méthodes de ré-initialisation et de d'envoi de la requête avec QSParser. N'oublier pas de fermer la fonction anonyme et comme celle-ci est assigner à une variable : testQSParser de terminer l'assignation par un ;

	QSParser.reset();
	QSParser.setURL();
);

Voila vous savez tous maintenant, alors à vous de jouer. Et n'oubliez pas de télécharger ( en format tar.gz ) ma fonction.

Catérogies : Tutoriels