javascript分享几种获取URL地址中查询字符串参数和值的方法

时间:2017-07-28
本文章向大家介绍javascript如何获取一个页面地址中的查询字符串参数,包括参数的key键和值。这里主要使用到正则表达式的相关知识,需要的朋友可以参考一下。

方法一:原生JavaScript

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)

注意:如果一个参数存在多次(?foo=lorem&foo=ipsum),您将获得第一个值(lorem)

方法二:插件

插件Purl允许检索URL的所有部分,包括锚点,主机等。

它可以使用或不使用jQuery。

用法很简单,很酷:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

然而,该插件已经没人维护了,笔者建议使用URI.js代替。代码如下:

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'