En tant que développeur front-end, nous avons souvent besoin d'exploiter et de traiter des URL. La méthode la plus courante consiste à obtenir les valeurs des paramètres contenues dans le lien URL. Les amis qui utilisent le développement de framework peuvent trouver cela très simple, car le framework fournit de nombreuses méthodes pour nous permettre d'obtenir facilement les paramètres portés par le lien URL. Mais parfois, nous ne pouvons pas nous appuyer sur le framework et devons utiliser du JS natif pour obtenir des paramètres. C'est aussi une question souvent rencontrée lors des entretiens. Aujourd'hui, nous allons déchirer le code à la main et utiliser JS natif pour obtenir les valeurs des paramètres du lien URL.
Il existe plusieurs façons d'obtenir les paramètres d'un lien URL à l'aide de JS natif. Aujourd'hui, nous expliquerons les plus courantes :
en utilisant la correspondance régulière,
en utilisant la méthode intégrée d'une balise,
en utilisant la méthode split,
en utilisant URLSearchParams. méthode
Il s'agit d'une méthode très standard. Le point clé est que nous devons comprendre les expressions régulières.
Le code est le suivant :
<script>
//Utilisez l'expression régulière let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Renvoie la fonction de l'objet paramètre queryURLParams(url) {
let pattern = /(w+)=(w+)/ig; //Définir l'expression régulière let parames = {}; //Définir l'objet paramètre url.replace(pattern, ($, $1, $2) => {
paramètres[$1] = $2;
});
renvoyer les paramètres ;
}
console.log(queryURLParams(url))
</script> Le code ci-dessus se concentre sur la définition des expressions régulières et l'utilisation de la méthode replace, parmi lesquelles
1 et $2 représentent respectivement nom=éléphant, nom, éléphant, etc. Vous pouvez l'apprendre par vous-même pour une utilisation plus détaillée du remplacement combiné avec des expressions régulières.
Effet de réalisation :
est rarement utilisée par les gens, car après tout, elle a une signification un peu technologique noire. Son principe est principalement d'utiliser la balise a pour obtenir certains attributs intégrés, tels que href, hash, search et autres attributs.
Le code est le suivant :
<script>
laissez URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
fonction requêteURLParams(url) {
// 1. Créez une balise let link = document.createElement('a');
lien.href = url ;
let searchUrl = link.search.substr(1); // Récupère la chaîne après le point d'interrogation let hashUrl = link.hash.substr(1); // Récupère la valeur après # let obj = {}; object/ / 2. Stocker hashUrl dans l'objet ? obj['HASH'] = hashUrl : null; // #Y a-t-il une valeur derrière let list = searchUrl.split("&");
pour (soit i = 0; i < list.length; i++) {
let arr = list[i].split("=");
obj[arr[0]] = arr[1];
}
retourner obj ;
}
console.log(queryURLParams(URL))
</script> Dans le code ci-dessus, une balise a est d'abord créée, puis chaque partie de l'URL peut être obtenue en fonction des attributs de la balise a. Ceci est en fait quelque peu similaire au saut de routage de Vue pour obtenir les paramètres.
Effet de réalisation :
Cette méthode profite du fait que split peut diviser une chaîne en un tableau basé sur un certain caractère, et divise intelligemment chaque paramètre.
Le code est le suivant :
<script>
laissez URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
fonction requêteURLParams(URL) {
// const url = location.search; // Dans le projet, vous pouvez obtenir directement la chaîne après le caractère "?" dans l'url via la méthode de recherche let url = URL.split("?")[1];
let obj = {}; // Déclarer l'objet paramètre let arr = url.split("&"); // Diviser en tableau avec une esperluette pour (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // Divisé en tableaux avec "=" obj[arrNew[0]] = arrNew[1];
}
retourner obj ;
}
console.log(queryURLParams(URL))
</script> Si le code de téléchargement est utilisé dans un projet réel, vous pouvez directement utiliser location.search pour obtenir la chaîne après "?". Pour faciliter la démonstration, split est utilisé pour diviser ce qui suit.
Effet de réalisation :
La méthode URLSearchParams nous permet d'obtenir les paramètres d'URL de manière très pratique, mais il existe certains problèmes de compatibilité. Le site officiel l'explique comme suit :
L'interface URLSearchParams définit quelques méthodes pratiques pour traiter les chaînes de requête d'URL.
Cette interface nous fournit des méthodes spéciales pour traiter les paramètres d'URL. Ici, nous présentons uniquement comment obtenir les valeurs des paramètres d'URL. Pour une utilisation plus détaillée, vous pouvez vous référer au site officiel.
Le code est le suivant :
<script>
laissez URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
fonction requêteURLParams(URL) {
let url = URL.split("?")[1];
const urlSearchParams = new URLSearchParams(url);
const params = Object.fromEntries(urlSearchParams.entries());
paramètres de retour
}
console.log(queryURLParams(URL))
</script> Ici, nous utilisons essentiellement seulement deux lignes de code principal pour implémenter l'analyse des paramètres. Il convient de noter que urlSearchParams.entries() renvoie un itérateur de protocole d'itération, nous devons donc utiliser la méthode Object.fromEntries() pour convertir la liste des paires clé-valeur en objet.
Concernant le protocole d'itération, vous pouvez vous référer au site officiel :
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
pour obtenir l'effet :
compatibilité:
Vous pouvez constater que notre interface n'est pas compatible avec IE, la source de tous les maux.
Quatre méthodes sont présentées ici pour réaliser l'analyse des valeurs des paramètres de lien URL, parmi lesquelles la méthode la plus largement utilisée est la méthode de fractionnement. En tant qu'étoile montante, urlSearchParams est progressivement reconnu par tous, et il existe de nombreuses façons de le rendre compatible avec IE.
[Tutoriels vidéo associés recommandés : front-end Web]
Ce qui précède explique comment obtenir les paramètres d'URL en JavaScript ? Pour des explications détaillées sur 4 méthodes courantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois pour plus d'informations !
