js地址栏参数怎么获得

原创

admin 2周前 (08-25) 阅读数 48 #Javascript

文章标签 Javascript

Javascript获取地址栏参数的几种方法

在Web开发中，我们常常需要获取浏览器地址栏中的参数，以便利用这些参数进行页面渲染或者数据请求。下面将介绍几种在Javascript中获取地址栏参数的方法。

方法一：使用location对象

浏览器提供的location对象包含了与当前页面的URL相关的信息。我们可以通过解析location.search属性来获取地址栏中的参数。


function getParameterByName(name) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(window.location.search);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// 使用例子
var value = getParameterByName('paramName');
console.log(value);

方法二：使用URLSearchParams API

现代浏览器中提供了一个更明了的方法来解析查询字符串，那就是URLSearchParams API。这是一个实验性功能，但已在大多数现代浏览器中得到良好拥护。


// 假设当前URL是：?name=JohnDoe&age=30
var params = (new URL(document.location)).searchParams;
var name = params.get('name'); // "JohnDoe"
var age = params.get('age'); // "30"
console.log(name, age);

方法三：通过分割字符串的方法

如果你需要拥护的浏览器非常古老，不能使用上述方法，你可以使用字符串分割的方法来解析查询字符串。


function getParamsByUrl(url) {
    var params = {};
    var parser = document.createElement('a');
    parser.href = url;
    var query = parser.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
}
// 使用例子
var params = getParamsByUrl(window.location.href);
console.log(params['paramName']);