如何获取URL中的请求参数的值?

问题描述

对于给定的URL——‘www.timsrc.com/test?foo=lorem&bar=&baz’,如何获取其中的请求参数的值,例如:

getParameterByName('foo') // 其值为 lorem

解决方案

1. 最简单方案,使用URLSearchParams

大部分的现代浏览器都支持它,请查看其兼容性情况:

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

2. 原生JS解决办法

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

使用:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)
用户头像
登录后发表评论