Como desarrollador front-end, a menudo necesitamos operar y procesar URL. La más común es obtener los valores de los parámetros incluidos en el enlace URL. Los amigos que utilizan el desarrollo de marcos pueden encontrar esto muy simple, porque el marco proporciona muchos métodos para que podamos obtener convenientemente los parámetros transportados por el enlace URL. Pero a veces no podemos confiar en el marco y necesitamos usar JS nativo para obtener parámetros. Esta también es una pregunta que se encuentra a menudo en las entrevistas. Hoy romperemos el código a mano y usaremos JS nativo para obtener los valores de los parámetros del enlace URL.
Hay varias formas de obtener parámetros de enlaces URL usando JS nativo. Hoy explicaremos las más comunes:
usando coincidencias regulares,
usando el método integrado de etiqueta,
usando el método de división,
usando URLSearchParams. método
Este es un método muy estándar. El punto clave es que necesitamos comprender las expresiones regulares.
El código es el siguiente:
<script>
//Usa la expresión regular let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Devuelve la función del objeto de parámetro queryURLParams(url) {
let patrón = /(w+)=(w+)/ig; //Definir expresión regular let parames = {} //Definir objeto de parámetro url.replace(pattern, ($, $1, $2) => {
parámetros[$1] = $2;
});
parámetros de retorno;
}
console.log(queryURLParams(url))
</script> El foco del código anterior es la definición de expresiones regulares y el uso del método de reemplazo, entre los cuales
1 y $2 representan respectivamente nombre=elefante, nombre, elefante, etc. Puede aprenderlo usted mismo para obtener un uso más detallado de reemplazar combinado con expresiones regulares.
Efecto de realización:
porque, después de todo, tiene un significado tecnológico un poco negro. Su principio es principalmente utilizar la etiqueta a para obtener algunos atributos integrados, como href, hash, búsqueda y otros atributos.
El código es el siguiente:
<script>
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
función queryURLParams(url) {
// 1. Crea una etiqueta let link = document.createElement('a');
enlace.href = URL;
let searchUrl = link.search.substr(1); // Obtiene la cadena después del signo de interrogación let hashUrl = link.hash.substr(1); // Obtiene el valor después de # let obj = {}; object/ / 2. ¿Almacenar hashUrl en el objeto? obj['HASH'] = hashUrl : null // #¿Hay un valor detrás de let list = searchUrl.split("&");
for (sea i = 0; i < lista.longitud; i++) {
let arr = lista[i].split("=");
obj[arr[0]] = arreglo[1];
}
objeto de retorno;
}
console.log(queryURLParams(URL))
</script> En el código anterior, primero se crea una etiqueta y luego se puede obtener cada parte de la URL en función de los atributos de la etiqueta a. En realidad, esto es algo similar al salto de enrutamiento de Vue para obtener parámetros.
Efecto de realización:
Este método aprovecha el hecho de que la división puede dividir una cadena en una matriz basada en un determinado carácter y divide inteligentemente cada parámetro.
El código es el siguiente:
<script>
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
función queryURLParams(URL) {
// const url = location.search; // En el proyecto, puede obtener directamente la cadena después del carácter "?" en la URL a través del método de búsqueda let url = URL.split("?")[1];
let obj = {}; // Declarar objeto de parámetro let arr = url.split("&" // Dividir en matriz con signo comercial for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // Dividir en matrices con "=" obj[arrNew[0]] = arrNew[1];
}
objeto de retorno;
}
console.log(queryURLParams(URL))
</script> Si el código de carga se usa en un proyecto real, puede usar directamente location.search para obtener la cadena después de "?" Para facilitar la demostración, se usa división para dividir lo siguiente.
Efecto de realización:
El método URLSearchParams nos permite obtener parámetros de URL de manera muy conveniente, pero existen ciertos problemas de compatibilidad. El sitio web oficial lo explica de la siguiente manera:
La interfaz URLSearchParams define algunos métodos prácticos para procesar cadenas de consulta de URL.
Esta interfaz nos proporciona métodos especiales para procesar los parámetros de URL. Aquí solo presentamos cómo obtener valores de parámetros de URL. Para un uso más detallado, puede consultar el sitio web oficial.
El código es el siguiente:
<script>
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
función queryURLParams(URL) {
let url = URL.split("?")[1];
const urlSearchParams = nuevo URLSearchParams(url);
const params = Object.fromEntries(urlSearchParams.entries());
parámetros de retorno
}
console.log(queryURLParams(URL))
</script> Aquí básicamente usamos solo dos líneas de código principal para implementar el análisis de parámetros. Cabe señalar que urlSearchParams.entries () devuelve un iterador de protocolo de iteración, por lo que debemos usar el método Object.fromEntries () para convertir la lista de pares clave-valor en un objeto.
Con respecto al protocolo de iteración, puede consultar el sitio web oficial:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
para lograr el efecto:
compatibilidad:
Puedes ver que nuestra interfaz no es compatible con IE, la fuente de todos los males.
aquí se presentan cuatro métodos para realizar el análisis de los valores de los parámetros del enlace URL. Entre ellos, el más utilizado es el método de división. Como estrella en ascenso, todos reconocen gradualmente urlSearchParams y hay muchas formas de hacerlo compatible con IE.
[Tutoriales en vídeo relacionados recomendados: interfaz web]
Lo anterior explica cómo obtener parámetros de URL en JavaScript. Para obtener explicaciones detalladas de 4 métodos comunes, preste atención a otros artículos relacionados en el sitio web chino de PHP para obtener más información.
