JS · 获取url的值

let url = "pages/loading/first?scene=bab78ee2eb58492c80930c71d87163cd&bbb=22222&ccc=3333";

获取Url的代码如下：window.location.href;

获取最后一个/后面的所有值：

//JS
function getValue(url){
	//获取最后一个/的位置
	var site = url.lastIndexOf("\/");
	//截取最后一个/后的值
	return url.substring(site + 1, url.length);
}

结果如下

first?scene=bab78ee2eb58492c80930c71d87163cd&bbb=22222&ccc=3333

获取最后一个/前面的值：

第二种方法：

//JS
function getValue(url){
	//如果不写这一行 将会取最后一个/前所有值
	var url = url.substr(url.lastIndexOf('/', url.lastIndexOf('/') - 1) + 1);
	//获取最后一个/的位置
	var site = url.lastIndexOf("\/");
	//截取最后一个/后的值
	return url.substring(0, site);
}

结果如下

loading

如果想取前面所有值 把var url = …注释掉即可
结果为

pages/loading

获取？拼接的值：

方法一

var url = 'https://gitbook.cn/gitchat/geekbooks?tag=JavaScript&name=pwwu&age=24';
        var temp1 = url.split('?');
        var pram = temp1[1];
        var keyValue = pram.split('&');
        var obj = {};
        for (var i = 0; i<keyValue.length; i++){
            var item = keyValue[i].split('=');
            var key = item[0];
            var value = item[1];
            obj[key] = value;
        }
        console.log(url);
        console.log(temp1);    //  ['https://gitbook.cn/gitchat/geekbooks','tag=JavaScript&name=pwwu&age=24']
        console.log(pram);     //  tag=JavaScript&name=pwwu&age=24
        console.log(keyValue); //  ['tag=JavaScript','name=pwwu','age=24']
        console.log(obj);      //  {tag:'JavaScript',name:'pwwu',age:'24'}

获取url参数:

function getQueryVariable(variable)
{
       var query = 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] == variable){return pair[1];}
       }
       return(false);
}

使用实例
url 实例：
http://www.runoob.com/index.php?id=1&image=awesome.jpg
调用 getQueryVariable(“id”) 返回 1。
调用 getQueryVariable(“image”) 返回 “awesome.jpg”。

方法二 URLSearchParams()函数（记不住函数名的可以直接在浏览器里面打印）

     var url2 = 'https://gitbook.cn/gitchat/geekbooks?tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22';
        var temp2 = url2.split('?')[1];
        var pram2 = new URLSearchParams('?'+temp2);
        console.log(pram2.get('tag')); // 大数据
        console.log(pram2.get('name'));// gy
        console.log(pram2.get('age')); // 22
        console.log(temp2);   //tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22

方法三 使用正则表达式

//获取url中的参数方法
        function getUrlParam(name) {
            //构造一个含有目标参数的正则表达式对象
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            //匹配目标参数
            var r = window.location.search.substr(1).match(reg);
            //返回参数
            if (r != null) {
                return unescape(r[2]);
            } else {
                return null;
            }
        }
        
var queryVal=getUrlParam('name');
console.log(queryVal);// 小明

function getQueryString(url, e){
	let reg = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i");
	let r = url.match(reg);
	if (r != null) return unescape(r[2]); return null;
}


let site = url.lastIndexOf("?");
url = url.substring(site + 1, url.length);

getQueryString(url, 'scene');  //获取scene
getQueryString(url, 'bbb');  //获取bbb
getQueryString(url, 'ccc');  //获取ccc

方法四：通过参数名获取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;
}

var queryVal=GetQueryValue('name')