js用获取url传递的参数方法总汇

这篇文章主要总结使用Js获取url中的某个参数值，下面介绍几种实现的过程。

方法一、URLSearchParams()函数

js原生方法，URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串，记不住函数名的可以直接在浏览器里面打印。

let urlSearchParams = new URLSearchParams(window.location.search);
let params = Object.fromEntries(urlSearchParams.entries());

注意：URLSearchParams存在兼容问题，解决需要加入一个babel就可以了。

npm install url-search-params-polyfill --save

在index.js中引入：

import 'url-search-params-polyfill';

方法二、使用正则表达式

function getParameterByName(name, 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)

注意：

1.如果某个参数出现多次 ( ?foo=lorem&foo=ipsum)，您将获得第一个值 ( lorem)。

2.该函数区分大小写。如果您不区分大小写的参数名称，请将“i”修饰符添加到 RegExp。

改进：

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

方法三：原生js

主要思路就是将Url用split()分割成不同的块，返回值为一个数组，一直分割到为 [‘tag=JavaScript’,‘name=pwwu’,‘age=24’]为止，然后将该数组中的每一项以键值对的形式传进一个空对象obj（这里需要遍历数组），最后利用obj.name“点”的方式获取相应参数。

function getParameterByName(name, url = window.location.href){
   let pram = url.split('?')[1];
   let keyValue = pram.split('&');
   let obj = {};
   for (let i = 0; i<keyValue.length; i++){
	   let item = keyValue[i].split('=');
	   let key = item[0];
	   let value = item[1];
	   obj[key] = value;
   }
   return obj[name];
}

我们还可以优化简洁一下上面的代码：

function getParameterByName(name, url = window.location.href){
    let qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0,result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result[name];
}

方法四：jquery 插件的实现

(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

语法是：

var someVar = $.getQueryString('myParam');

方法五：其他方式

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

using ES6 (23 characters cooler)

var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

更简洁的实现：

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

借助URI.js库。它是一个用于操作 URL 的库。如下：

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

链接: https://fly63.com/article/detial/10703