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

时间:?2021-10-09阅读:?22标签:?url

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


方法一,URLSearchParams()函数

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

let urlSearchParams = new URLSearchParams(var tt.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 = var tt) {
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.var tt){
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"
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10703

Google 谈论杀死 URL 的第一步

“一个关键的挑战是避免将合法域名标记为可疑域名。” URL 是 Uniform Resource Locator(统一资源定位符)的缩写,用户无需记住复杂的 IP 地址而只需要记住域名就能访问一个网站。

短网址(short URL)系统的原理及其实现

做一个短链接生成器,可以将一个长链接缩短成一个短链接。就是把普通网址,转换成比较短的网址。好处不言而喻。短,字符少,美观,便于发布,传播。

使用 Redis 构建短网址生成程序

为了给用户提供更多发言空间, 并记录用户在网站上的链接点击行为, 大部分社交网站都会将用户输入的网址转换为相应的短网址。 那么微博将把这个网址转换为相应的短网址

AngularJS实现地址栏取值

有时候我们由如下需求:1,从a.html跳转到b.html2,从a跳转时携带参数和值,3,从b.html中取出传过来的参数值,在AngularJS的操作如下:

Url的Base64编码以及解码

Base64可以将二进制转码成可见字符方便进行http传输,但是base64转码时会生成“+”,“/”,“=”这些被URL进行转码的特殊字符,导致两方面数据不一致。

html中绝对路径和相对路径的区别?比较相对路径和绝对路径的优缺点

相对路径就是相对于当前文件的路径;可以防止被抄袭,如果网页位置改变,里面的链接还是指向正确的URL。在编码编写时不方便使用绝对路径,因为链接应该指向真正的域名,而不是开发站点。

解决window.location.href跳转无效问题解决办法

原因是 a标签的href跳转会执行在window.location.href设置的跳转之前:如果是表单form的话 也会先执行form提交。提交之后 就已经不在当前页面了。所以 window.location.href无效。

如何用 JavaScript 来解析 URL

统一资源定位符,缩写为URL,是对网络资源(网页,图像,文件)的引用。URL指定资源位置和检索资源的机制(http,ftp,mailto)。

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

在浏览器地址栏输入URL,浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤,如果资源未缓存,发起新请求,如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证...

前后端分离, 旺球体育在线如何防止直接输入URL进入页面?

前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用户是否登录,没有,则直接跳转到登录页,后台可以用session记录用户登陆的状态,疑问的是旺球体育在线每次ajax请求,都要做状态判断么

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu