URL参数的获取方法

以夢爲馬37

已于 2024-07-02 15:43:27 修改

阅读量879

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript ecmascript

于 2024-07-02 15:24:01 首次发布

本文链接：https://blog.csdn.net/IT_Computer/article/details/140126161

前端专栏收录该内容

15 篇文章

订阅专栏

1、正则法

function getQueryParam(key) {
    const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
    const result = window.location.search.substr(1).match(reg);
    if (result != null) {
        return decodeURI(result[2]);
    }
    return null;
}

说明：

其中"(^|&)" + key + "=([^&]*)(&|$)"
含义：取以key开头或者以&开头以&或者以$结尾的字符串
(^|&)：匹配字符串开头或者&字符,如果其后还有正则,那么必须出现在字符串开始或&字符之后
([^&]*)：[^&]匹配除了&之外的任意字符, ([^&]*)匹配除了&之外的任意字符 0或多次
(&|$)：匹配以&或者以$结尾的字符串
i：表示匹配时不区分大小写
window.location.search.substr(1).match(reg)的意思是找出?之后匹配reg的字符串
substr(start,end)：截取字符串
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，返回一个数组
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
decodeURI(result[2])的意思是对所选的字符串进行解码。

2、URLSearchParams法（需浏览器支持）

getQueryParam(key) {
    const url = new URL(window.location.href);
	// 然后，使用URLSearchParams获取参数
	const param = url.searchParams.get(key); // 返回 'value'
	return param;
}

3、split拆分法

function getQueryParam(queryName) {
    var query = decodeURI(window.location.search.substring(1));
    var params = query.split("&");
    for (var i = 0; i < params.length; i++) {
        var param = params[i].split("=");
        if (param[0] == queryName) { return param[1]; }
    }
    return null;
}