Api JavaScript URL et URLSearchParams

Pendant des années, il a été très compliqué d'obtenir des informations sur un lien.

Bien sûr, nous pouvons utiliser window.location mais cela donne des informations sur l'url courante uniquement:

Après, il existe bien une "ruse", qui consiste de créer un élément de type "link" car ces derniers ont des informations sur l'url saisie dans l'attribut "href":

Néanmoins, cela n'est pas forcément "simple" et de plus, pour extraire les "query parameters", nous devons faire des expressions régulières, un "split('&'), ... Bref nous devons faire un parsin gmanuel.

Il existe désormais une api se nommant URL et URLSearchParams qui permet de nous faciliter la tâche.

Pour l'utiliser, rien de plus simple.

Dans le cas d'URL, où nous aurons un ensemble d'information sur l'url, nous devons tout simplement faire la chose suivante:

let url = new URL('https://www.example.com/users?version=1.0');

Nous obtiendrons alors:

{
   "hash": "",
   "host": "www.example.com",
   "hostname": "www.example.com",
   "href": "https://www.example.com/users?version=1.0",
   "origin": "https://www.example.com",
   "password": "",
   "pathname": "/users",
   "port": "",
   "protocol": "https:",
   "search": "?version=1.0",
   "username": ""
}

Nous aurons même une propriété de type "searchParams" qui est une instance de URLSearchParams. 

Vous pouvez néanmoins utiliser le moyen suivant pour avoir des informations:

let params = new URLSearchParams(url.search);

Vous aurez alors accès à un itérateur sur toutes les query parameters déclarés:

let paramsString = "q=URLUtils.searchParams&topic=api";
let searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

J'ai fait un petit jsfiddle afin de jouer avec: https://jsfiddle.net/rochejul/2tLwf9L4/

Comme vous pouvez le voir, les deux apis ont une bonne intégration dans nos navigateurs:

• https://caniuse.com/#feat=url
• https://caniuse.com/#feat=urlsearchparams

S'il vous faut assurer une plus grande compatibilité, vous avez cet excellent polyfill pour vous aider: https://www.npmjs.com/package/url-polyfill.

Enjoy