Parser une url, quelle méthode compatible tous navigateurs ?

Par Jean Sérien, il y a 2 ans


Bonjour à tous,

Je n'arrive pas à formatter une url pour exploiter certains de ces attributs avec la méthode new URL() et pouvoir extraire que la portion dont a besoin mon controller et le fetch relié...

Par exemple sur une url complète "https://127.0.0.1:8000/admin/ecritures/liste-factures?page=2" je n'ai besoin que de la partie "/admin/ecritures/liste-factures?page=2"

Mon listener me renvoie bien une url correcte et complète à chaque fois, mais comment faire pour qu'elle soit au bon format lorsqu'on utilise new URL() puisque celui-ci ne cesse de me dire que l'url rentrée n'est pas correcte, pourtant en console elle contient bien les guillemets, ce n'est pas la bonne méthode ?

Merci d'avance pour vos lumières

//filtrage pour pagination pagination.forEach((el) => { el.addEventListener("click", (e) => { e.preventDefault(); const urlPagination = e.target.getAttribute("href").toString(); const stringUrl = new URL('"' + urlPagination + '"'); console.log(stringUrl.pathname); }); });

3 réponses

popotte, il y a 2 ans

Hello :)

Alors non, il ne faut pas qu'il y ait des guillemets, il faut juste que le champ soit en string

La présence de guillemets dans certains navigateurs ça sert juste à indiquer que ccc'est une string, mais il ne faut pas de vrais guillemets éxistants

const stringUrl = new URL(urlPagination);
Jean Sérien, il y a 2 ans

Merci Popotte d'avoir répondu

J'ai trouvé la solution, c'était subtil mais voici l'explication :

J'observe que la fonction getAttribute("href") tronque déjà d'elle même l'url entière pour ne laisser que le pathname raison pour laquelle il n'y a donc plus besoin de parser en passant par new URL()...

J'avais confondu avec la fonction "document.getElementById("aaa").href" que j'avais utilisée au début qui très ressemblante à la première,elle, donne l'url entière !, d'où la confusion

En tous les cas merci pour votre effort de réponse

Bonnes fêtes

juditmara, il y a 2 ans

Dans cet exemple, pathname renvoie le chemin de l'URL ("/admin/ecritures/liste-factures") et search renvoie la chaîne de requête (y compris le "?page=2"). Vous pouvez les concaténer pour obtenir la portion souhaitée.

https://wfevents.fr