js获取url中指定参数的值（兼容hash）

Posted 2023-05-03

参考技术A 示例：
*URL： https://www.baidu.com/?name=21002492_21_hao_pg

window.location和document.location互相等价的，可以交换使用

location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载

注意
URL： https://www.baidu.com/?name=21002492_21_hao_pg#test?test1=1

search:"?name=21002492_21_hao_pg" 第一个"?"之后

hash:"#test?test1=1" 第一个"#"之后的内容

注意上面的search和hash的区别，如果URL中“？”之前有一个“#”比如：“ https://www.baidu.com/#/test?name=21002492_21_hao_pg ”那么使用window.location.search得到的就是空（“”）。因为“?name=21002492_21_hao_pg”串字符是属于“#/test?name=21002492_21_hao_pg”这个串字符的，也就是说查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。

现在前端会使用大量的框架来搭建前端页面应用，比如vue，当开启hash模式的时候，在实例外部方法无法使用this.$route时，老方法window.location.search也获取不到，这时需要使用window.location.hash来获取参数

兼容hash模式与非hash模式的方法：

js获取URL里的参数

第一种 通过正则获取URL中指定的参数

/** 
 * 获取指定的URL参数值 
 * URL:http://www.xxx.com/index?name=123
 * 参数：param URL参数 
 * 调用方法:getParam("name") 
 * 返回值:123
 * alert(getParam(‘date‘));
 */ 
function getParam(name) {  
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
　　//search,查询？后面的参数，并匹配正则
    var r = location.search.substr(1).match(reg);  
　　if (r != null) return decodeURI(decodeURI(r[2])); 
}

 

第二种 既可以获取URL中全部参数，也可以获取单个参数

/** 
 * js获取url参数值
 * 思路，通过location的search获取url中问号后面的值，字符串过滤掉问号，再通过split方法分割参数集合、循环赋值、匹配对应的参数，最后返回值
 * URL:http://www.xxx.com/index?name=123
 * 参数：param URL参数 
 * 调用方法:getUrlParams("name") 
 * 返回值:123
 * alert(getUrlParams(‘date‘));
 */ 
function getUrlParams(name) { // 不传name返回所有值，否则返回对应值
    var url = window.location.search;
    if (url.indexOf(‘?‘) == 1) { return false; }
    url = url.substr(1);
    url = url.split(‘&‘);
    var name = name || ‘‘;
    var nameres;
    // 获取全部参数及其值
    for(var i=0;i<url.length;i++) {
        var info = url[i].split(‘=‘);
        var obj = {};
        obj[info[0]] = decodeURI(info[1]);
        url[i] = obj;
    }
    // 如果传入一个参数名称，就匹配其值
    if (name) {
        for(var i=0;i<url.length;i++) {
            for (const key in url[i]) {
                if (key == name) {
                    nameres = url[i][key];
                }
            }
        }
    } else {
        nameres = url;
    }
    // 返回结果
    return nameres;
}

const url = ‘http://www.abc.com/test.php?id=1&from=index‘;
var res = getUrlParams();
var res1 = getUrlParams(‘id‘);
console.log(res); //  [{id: "1"}, {from: "index"}]
console.log(res1); // 1

 

第三种 获取URL中的参数名及参数值的集合

/**
 * [获取URL中的参数名及参数值的集合]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合]
 * @return {[string]}       [参数集合]
 */
function GetRequest(urlStr) {
    if (typeof urlStr == "undefined") {
        var url = decodeURI(location.search); //获取url中"?"符后的字符串
    } else {
        var url = "?" + urlStr.split("?")[1];
    }
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}

 var parms_1 = GetRequest();
2 console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
3 console.log(parms_1[‘name‘]); // ‘小明‘
4 var parms_2 = GetRequest(‘http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明‘);
5 console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
6 console.log(parms_2[‘name‘]); // ‘小明‘

 

第四种 通过参数名获取url中的参数值

/**
 * [通过参数名获取url中的参数值]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param  {[string]} queryName [参数名]
 * @return {[string]}           [参数值]
 */
function GetQueryValue(queryName) {
    var query = decodeURI(window.location.search.substring(1));
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == queryName) { return pair[1]; }
    }
    return null;
}

1 var queryVal=GetQueryValue(‘name‘);
2 console.log(queryVal);// 小明