详解使用 JavaScript 解析 URL的方法(2)-木庄网络博客

当前第2页返回上一页

1 2	`console.log(myURL.search);` `// Output: "?x=y&a=b"`

但是，如果我们想要拆分它们并获取它们的值，那就有点复杂了。

使用 URLSearchParams 解析查询参数

要解析查询参数，我们需要创建一个 URLSearchParams 对象，如下所示：

1	`var` `searchParams =` `new` `URLSearchParams(myURL.search);`

然后可以通过调用 searchParams.get（'key'）来获取特定键的值。使用我们的示例网址 - 这是原始搜索参数：

1	`?x=y&a=b`

因此，如果我们调用 searchParams.get（'x'），那么它应该返回 y，而 searchParams.get（'a'）应该返回 b，我们来试试吧！

console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"

扩展

获取 URL 的中参数

方法一：正则法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
 
alert(GetQueryString("参数名3"));

方法二：split拆分法

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    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]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

修改 URL 的中某个参数值

//替换指定传入参数的值,paramName为参数,replaceWith为新值
function replaceParamVal(paramName,replaceWith) {
    var oUrl = this.location.href.toString();
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
    this.location = nUrl;
　　window.location.href=nUrl
}