JS获取URL参数的3种方法详解

大家好，我们又见面了啊~本文《JS获取URL参数的3种实用方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

如何从URL中提取参数值？1.使用URLSearchParams是现代推荐方法，适用于大多数浏览器，能轻松解析参数并处理编码；2.正则表达式适用于兼容老浏览器或高性能场景，但需手动解码；3.第三方库如qs适合处理复杂结构，支持嵌套对象和数组，但会增加依赖。例如，URLSearchParams可直接解析"tag=javascript&tag=nodejs"获取多个同名参数，正则表达式需通过特殊匹配提取，而qs则能解析出完整对象结构。

直接从URL中提取参数值，听起来简单，但实际应用中却藏着不少小技巧。最直接的方法是使用URLSearchParams，现代浏览器都支持，用起来非常方便。当然，如果兼容性要求高，正则表达式也能派上大用场。还有一些库，比如qs，可以更方便地处理复杂的参数结构。

解决方案

1. 使用 URLSearchParams (推荐)

这是最现代、最简洁的方法，适用于大多数现代浏览器。

function getParameterByName(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&');
  const urlParams = new URLSearchParams(new URL(url).search);
  return urlParams.get(name) || null;
}

// 示例
const url = "https://www.example.com/page?name=John&age=30&city=New%20York";
const name = getParameterByName('name', url); // John
const age = getParameterByName('age', url);   // 30
const city = getParameterByName('city', url);  // New York

console.log("Name:", name);
console.log("Age:", age);
console.log("City:", city);

// 获取多个相同参数名的值
const url2 = "https://www.example.com/page?tag=javascript&tag=nodejs&tag=react";
const urlParams2 = new URLSearchParams(new URL(url2).search);
const tags = urlParams2.getAll('tag'); // ['javascript', 'nodejs', 'react']

console.log("Tags:", tags);

这个方法的好处是简单易懂，而且URLSearchParams对象提供了一系列方便的方法来操作URL参数。注意，new URL(url).search 确保了能正确解析包含复杂字符的URL。

2. 使用正则表达式

如果需要兼容老版本的浏览器，或者对性能有极致要求，可以使用正则表达式。

function getParameterByNameRegex(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 示例
const url = "https://www.example.com/page?name=John&age=30";
const name = getParameterByNameRegex('name', url); // John
const age = getParameterByNameRegex('age', url);   // 30

console.log("Name:", name);
console.log("Age:", age);

正则表达式方法稍微复杂一些，但它不依赖于任何新的API，因此兼容性更好。需要注意的是，要使用decodeURIComponent来解码URL编码的参数值。

3. 使用第三方库 (例如 qs)

对于更复杂的URL参数，例如嵌套的对象或数组，使用第三方库可能更方便。qs 是一个流行的库，可以用来解析和序列化URL参数。

首先，安装 qs:

npm install qs

然后，在你的代码中使用它：

import qs from 'qs';

function getParameterByNameQs(name, url = window.location.href) {
  const queryString = url.split('?')[1];
  if (!queryString) return null;
  const parsedQuery = qs.parse(queryString);
  return parsedQuery[name] || null;
}

// 示例
const url = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA";
const name = getParameterByNameQs('name', url); // John
const age = getParameterByNameQs('age', url);   // 30
const city = getParameterByNameQs('address[city]', url); // New York

console.log("Name:", name);
console.log("Age:", age);
console.log("City:", city);

// 解析整个query string
const url2 = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA";
const queryString2 = url2.split('?')[1];
const parsedQuery2 = qs.parse(queryString2);

console.log("Parsed Query:", parsedQuery2);
// 输出:
// {
//   name: 'John',
//   age: '30',
//   address: { city: 'New York', country: 'USA' }
// }

qs 库可以处理更复杂的URL结构，让代码更简洁易懂。但需要注意的是，引入第三方库会增加项目的依赖。

如何处理URL中包含特殊字符的参数值？

URL中的某些字符（例如空格、#、&）需要进行编码才能正确传递。通常，这些字符会被编码成 %20、%23、%26 等形式。在获取参数值之后，需要对这些编码进行解码，才能得到原始的参数值。

URLSearchParams 和 decodeURIComponent 都能自动处理这些编码，因此使用它们可以避免手动解码的麻烦。但如果使用正则表达式，则需要手动使用 decodeURIComponent 进行解码。

例如：

const url = "https://www.example.com/page?message=Hello%20World%231&name=John%26Doe";

// 使用 URLSearchParams
const urlParams = new URLSearchParams(new URL(url).search);
const message = urlParams.get('message'); // Hello World#1
const name = urlParams.get('name');       // John&Doe

console.log("Message:", message);
console.log("Name:", name);

// 使用正则表达式 (需要手动解码)
function getParameterByNameRegex(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

const messageRegex = getParameterByNameRegex('message', url); // Hello World#1
const nameRegex = getParameterByNameRegex('name', url);       // John&Doe

console.log("Message (Regex):", messageRegex);
console.log("Name (Regex):", nameRegex);

如何获取URL中的哈希值（#后面的部分）？

哈希值（也称为锚点）是URL中 # 符号后面的部分。它通常用于在页面内跳转到特定的位置。要获取哈希值，可以使用 window.location.hash 属性。

const url = "https://www.example.com/page#section2";
const hash = window.location.hash; // #section2

console.log("Hash:", hash);

// 去掉 # 符号
const hashWithoutPound = hash.substring(1); // section2

console.log("Hash without #: ", hashWithoutPound);

需要注意的是，哈希值不会被发送到服务器，它只在客户端起作用。

什么时候应该使用哪种方法？

选择哪种方法取决于你的具体需求：

• URLSearchParams: 如果你的目标是现代浏览器，并且不需要处理非常复杂的URL结构，那么 URLSearchParams 是最佳选择。它简单易用，而且性能也不错。
• 正则表达式: 如果你需要兼容老版本的浏览器，或者对性能有极致要求，那么可以使用正则表达式。但需要注意的是，正则表达式的编写和维护可能会比较困难。
• 第三方库 (qs): 如果你需要处理非常复杂的URL结构，例如嵌套的对象或数组，那么使用第三方库可能更方便。但需要注意的是，引入第三方库会增加项目的依赖。

总的来说，URLSearchParams 是一个不错的起点，只有在它无法满足你的需求时，才考虑使用其他方法。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。