Como desenvolvedor front-end, muitas vezes precisamos operar e processar URLs. O mais comum é obter os valores dos parâmetros transportados no link da URL. Amigos que usam o desenvolvimento de frameworks podem achar isso muito simples, porque o framework fornece muitos métodos para obtermos convenientemente os parâmetros transportados pelo link URL. Mas às vezes não podemos confiar no framework e precisamos usar JS nativo para obter parâmetros. Essa também é uma questão frequentemente encontrada em entrevistas. Hoje vamos rasgar o código manualmente e usar JS nativo para obter os valores dos parâmetros do link da URL.
Existem várias maneiras de obter parâmetros de link de URL usando JS nativo. Hoje explicaremos os mais comuns:
usando correspondência regular,
usando o método integrado de tag,
usando o método split,
usando URLSearchParams. método
Este é um método muito padrão. O ponto principal é que precisamos entender as expressões regulares.
O código é o seguinte:
<script>
//Use expressão regular let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Retorna o objeto do parâmetro function queryURLParams(url) {
let pattern = /(w+)=(w+)/ig; //Definir expressão regular let parames = {};
parâmetros[$1] = $2;
});
parâmetros de retorno;
}
console.log(queryURLParams(url))
</script> O foco do código acima é a definição de expressões regulares e a utilização do método replace, entre os quais
1 e $2 representam respectivamente nome=elefante, nome, elefante e assim por diante. Você pode aprender sozinho para obter um uso mais detalhado de substituição combinado com expressões regulares.
Efeito de realização:
raramente é usado pelas pessoas, porque afinal tem um significado meio negro de tecnologia. Seu princípio é principalmente usar a tag a para obter alguns atributos integrados, como href, hash, search e outros atributos.
O código é o seguinte:
<script>
deixe URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
função queryURLParams(url) {
// 1. Crie uma tag let link = document.createElement('a');
link.href=url;
let searchUrl = link.search.substr(1); // Obtenha a string após o ponto de interrogação let hashUrl = link.hash.substr(1); // Obtenha o valor após # let obj = {}; object/ / 2. Armazenar hashUrl no objeto? obj['HASH'] = hashUrl : null; // #Existe um valor por trás de let list = searchUrl.split("&");
for (seja i = 0; i < list.length; i++) {
deixe arr = lista[i].split("=");
obj[arr[0]] = arr[1];
}
retornar objeto;
}
console.log(queryURLParams(URL))
</script> No código acima, uma tag a é criada primeiro e, em seguida, cada parte do URL pode ser obtida com base nos atributos da tag a. Na verdade, isso é um pouco semelhante ao salto de roteamento do Vue para obter parâmetros.
Efeito de realização:
Este método aproveita o fato de que split pode dividir uma string em um array baseado em um determinado caractere, e divide cada parâmetro de forma inteligente.
O código é o seguinte:
<script>
deixe URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
função queryURLParams(URL) {
// const url = location.search; // No projeto, você pode obter diretamente a string após o caractere "?" na url através do método de pesquisa let url = URL.split("?")[1];
let obj = {}; // Declara o objeto de parâmetro let arr = url.split("&"); // Dividir em array com e comercial for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("=" // Dividir em arrays com "=" obj[arrNew[0]] = arrNew[1];
}
retornar objeto;
}
console.log(queryURLParams(URL))
</script> Se o código de upload for usado em um projeto real, você pode usar location.search diretamente para obter a string após "?" Para fins de demonstração, split é usado para dividir o seguinte.
Efeito de realização:
O método URLSearchParams nos permite obter parâmetros de URL de forma muito conveniente, mas há alguns problemas de compatibilidade. O site oficial explica isso da seguinte forma:
A interface URLSearchParams define alguns métodos práticos para processar strings de consulta de URL.
Esta interface fornece métodos especiais para processar parâmetros de URL. Aqui apresentamos apenas como obter valores de parâmetros de URL. Para um uso mais detalhado, você pode consultar o site oficial.
O código é o seguinte:
<script>
deixe URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
função queryURLParams(URL) {
deixe url = URL.split("?")[1];
const urlSearchParams = novo URLSearchParams(url);
const params = Object.fromEntries(urlSearchParams.entries());
parâmetros de retorno
}
console.log(queryURLParams(URL))
</script> Aqui usamos basicamente apenas duas linhas de código principal para implementar a análise de parâmetros. Deve-se observar que urlSearchParams.entries() retorna um iterador de protocolo de iteração, portanto, precisamos usar o método Object.fromEntries() para converter a lista de pares de valores-chave em um objeto.
Em relação ao protocolo de iteração, você pode consultar o site oficial:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
para obter o efeito:
compatibilidade:
Você pode ver que nossa interface não é compatível com o IE, a fonte de todos os males.
Quatro métodos são apresentados aqui para realizar a análise dos valores dos parâmetros do link de URL. Entre eles, o mais utilizado é o método de divisão. Como uma estrela em ascensão, urlSearchParams é gradualmente reconhecido por todos e há muitas maneiras de torná-lo compatível com o IE.
[Tutoriais em vídeo relacionados recomendados: front-end da web]
O texto acima é como obter parâmetros de URL em JavaScript? Para explicações detalhadas de 4 métodos comuns, preste atenção a outros artigos relacionados no site PHP chinês para obter mais informações!
