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

前言

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

方法总结

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

1.使用正则表达式

2.利用split分割方法

3.使用URLSearchParams方法

正则

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";
        console.log(queryURLParams(url)); // 返回所有参数对象
        console.log(queryURLParams(url, 'name')); // 返回参数名为 'name' 的值
        console.log(queryURLParams(url, 'age')); // 返回参数名为 'age' 的值
        console.log(queryURLParams(url, 'color')); // 返回""

split 分割

 let targetUrl = "https://www.baidu.com?haha=1&hehe=2"
        function getQueryparam(param){
            let resultParam
            let queryParamArr = targetUrl.split('?')[1].split('&')
            if (queryParamArr.length) {
                queryParamArr.some(item => {
                    if (item.includes(param)) {
                        resultParam = item.split('=')[1]
                    }
                })
            }
            return resultParam
        }
   console.log(getQueryparam('hehe')) //2

URLSearchParams方法

function getQueryParam(url, param) {
  // 创建一个新的URL对象
  const urlObj = new URL(url);
  // 使用URLSearchParams获取指定参数的值
  return urlObj.searchParams.get(param);
}