JavaScript获取URL参数常见的4种方法

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作 者：码喽的自我修养🥰
📝 专 栏：JavaScript深入研究 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦💕

在前端开发中，处理URL参数是一个常见的任务，尤其是在没有框架支持的情况下。虽然许多框架提供了方便的方法来获取URL参数，但有时我们需要依赖原生JavaScript来完成这个任务。这也是面试中经常出现的问题之一。今天让我们一起来探讨如何利用原生JavaScript来获取URL参数值。

​

原生JS获取URL链接参数的方法有好几种，我们一起来学习一下常见的几种 。

1.使用正则表达式

2.利用a标签内置方法

3.利用split分割方法

4.使用URLSearchParams方法

方法一: 正则表达式

```javascript
function queryURLParams(url, paramName) {
    // 正则表达式模式，用于匹配URL中的参数部分。正则表达式的含义是匹配不包含 ?、&、= 的字符作为参数名，之后是等号和不包含 & 的字符作为参数值
    let pattern = /([^?&=]+)=([^&]+)/g;
    let params = {};

    // match用于存储正则匹配的结果
    let match;
    // while 循环和正则表达式 exec 方法来迭代匹配URL中的参数
    while ((match = pattern.exec(url)) !== null) {
        // 在字符串url中循环匹配pattern，并对每个匹配项进行解码操作，将解码后的键和值分别存储在key和value变量中
        let key = decodeURIComponent(match[1]);
        let value = decodeURIComponent(match[2]);

        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            // 参数名在 params 对象中不存在，将该参数名和对应的值添加到 params 对象中
            params[key] = value;
        }
    }

    if (!paramName) {
        // 没有传入参数名称, 返回含有所有参数的对象params
        return params;
    } else {
        if (params[paramName]) {
            return params[paramName];
        } else {
            return '';
        }
    }
}

let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100&name=lion";
console.log(queryURLParams(url)); // 返回所有参数对象
console.log(queryURLParams(url, 'name')); // 返回参数名为 'name' 的所有值
console.log(queryURLParams(url, 'age')); // 返回参数名为 'age' 的值
console.log(queryURLParams(url, 'color')); // 返回""
```

正则表达式解释:

• ([^? &=]+)：这部分是一个捕获组，表示匹配不包含?、&、= 的任意字符的一个或多个，即匹配参数名部分。
• = ：表示匹配参数名和参数值之间的等号。
• ([^ &]+)：这部分也是一个捕获组，表示匹配不包含& 的任意字符的一个或多个，即匹配参数值部分。
• g ：表示使用全局匹配模式，即匹配目标字符串中所有符合模式的部分。

方法二： 利用a标签

a标签内置的方法能够快速且方便地获取URL参数，

它的原理主要就是利用了a标签得到一些内置属性，如href、hash、search等属性。

考虑到URL中的哈希部分，在函数queryURLParams(url) 中，会检查URL中的哈希部分是否存在，如果存在则将哈希值存储到参数对象中，并将属性名设置为"HASH"。这样在返回的参数对象中，如果URL中有哈希部分，就可以通过"HASH"来访问哈希值。

```javascript
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
  function queryURLParams(url) {
    // 1.创建a标签
    let link = document.createElement('a');
    link.href = url;
    let searchUrl = link.search.substr(1); // 获取问号后面字符串
    let hashUrl = link.hash.substr(1); // 获取#后面的值
    let obj = {}; // 声明参数对象
    // 2.向对象中进行存储
    hashUrl ? obj['HASH'] = hashUrl : null; // #后面是否有值

    let list = searchUrl.split("&");
    for (let i = 0; i < list.length; i++) {
      let arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    }
    return obj;
  }
  console.log(queryURLParams(URL))
```

上段代码中先创建了一个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和Vue的路由跳转获取参数有点类似。

1. 将传入的URL赋值给 标签的 href 属性的目的是利用浏览器提供的原生 API 来帮助实现 URL 参数的解析。通过将URL赋值给 标签的 href 属性，浏览器会自动解析这个URL，包括提取其中的协议、主机、路径、查询参数等各个部分，从而方便我们对这个URL进行进一步的操作。

2. 通过link.search.substr(1)和link.hash.substr(1)可以获取URL中问号后面的字符串和#后面的值，是因为浏览器在解析URL后会将这些信息存储在标签对象的对应属性中。具体来说：

```javascript
function getUrlParams(url, paramName) {
    // 从 URL 中提取查询参数部分
    const queryString = url.split('?')[1];

    // 如果没有查询参数，返回空对象
    if (!queryString) {
        return {};
    }

    // 处理带有 hash 地址的情况
    const hashIndex = queryString.indexOf('#');
    if (hashIndex !== -1) {
        queryString = queryString.substring(0, hashIndex);
    }

    // 将查询参数字符串解析为键值对
    const queryParams = {};
    queryString.split('&').forEach(param => {
        const [key, value] = param.split('=');
        // 如果值已经存在，则将其转换为数组存储
        if (queryParams[key]) {
            if (Array.isArray(queryParams[key])) {
                queryParams[key].push(decodeURIComponent(value));
            } else {
                queryParams[key] = [queryParams[key], decodeURIComponent(value)];
            }
        } else {
            queryParams[key] = decodeURIComponent(value);
        }
    });

    // 如果没有指定参数名称，则返回包含所有查询参数的对象
    if (!paramName) {
        return queryParams;
    }

    // 如果指定了参数名称
    if (queryParams[paramName]) {
        return queryParams[paramName];
    } else {
        // 参数不存在，返回空字符串
        return '';
    }
}

// 示例 URL
const url = 'https://example.com?name=John&age=30&name=Jane&gender=male';
const urlWithHash = 'http://xxx.com/#/operations/app?name=John&age=30&name=Jane&gender=male';

console.log(getUrlParams(url)); 
// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

console.log(getUrlParams(url, 'name'));
// 输出: ['John', 'Jane']

console.log(getUrlParams(url, 'age'));
// 输出: '30'

console.log(getUrlParams(url, 'city'));
// 输出: ''

console.log(getUrlParams(urlWithHash)); 
// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

```

```javascript
 let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  function queryURLParams(URL) {
    let url = URL.split("?")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
  }
  console.log(queryURLParams(URL))
```

关于迭代协议，大家可以参考官网：迭代协议https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

总结：

这里介绍了四种方法来实现URL链接参数值的解析，其中使用最为广泛的应该当属split分割法。总的来说，了解和掌握这些方法可以帮助前端开发者更有效地处理URL参数，从而提升开发效率和应对面试中可能出现的相关问题。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易 ，如果能帮助到大家,希望大家点点 收藏+关注 ~💕

​

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战