JavaScript 获取url中的【参数】及【页面名称】
发布日期:2021-06-30 14:56:50
浏览次数:3
分类:技术文章
本文共 4182 字,大约阅读时间需要 13 分钟。
JavaScript 获取url中的【参数】及【页面名称】
URL.searchParams 实现
方案一
核心逻辑
(new URL(document.location)).searchParams.get('paramName');
写个类
class UrlParam{ constructor(){ this.params = (new URL(document.location)).searchParams; } get(name){ return this.params.get(name); }}var urlParam = new UrlParam();urlParam.get('paramName');
方案二
核心逻辑
Object.fromEntries(new URLSearchParams(location.search))['paramName'];
写个类
class UrlParam{ constructor(){ this.params = Object.fromEntries(new URLSearchParams(location.search)); } get(name){ return this.params[name]; }}var urlParam = new UrlParam();urlParam.params;urlParam.get('paramName');
从url获取参数及页面名称
window.Jerry = { getUrlParam : function (name) { /** * 从url获取参数 * 1、传入参数名(字符串),返回对应参数值 * 2、传入任意 object 返回 整个参数 object * 3、不传参数,返回参数object 的 keys * 如果找不到返回空字符串 */ var param = null; try{ //多次替换版 //param = JSON.parse('{"'+window.location.search.substr(1).replace(/=/g,'":"').replace(/&/g,'","')+'"}'); //正则+箭头函数版 (正则匹配到的字符,每个都会传给后面的函数来替换,其中做了=和&的判断) //param = JSON.parse('{"'+ window.location.search.substr(1).replace(/(=|&)/g, m=>({"=": '":"', "&": '","'}[m])) +'"}'); //正则+匿名函数版 (正则匹配到的字符,每个都会传给后面的函数来替换,其中做了=和&的判断) param = JSON.parse('{"'+ window.location.search.substr(1).replace(/(=|&)/g, function(m){ return { "=": '":"', "&": '","'}[m]}) +'"}'); }catch(e){ console && console.error && console.error('没有参数,获取失败') } if(!param){ return ''; } var result = ''; if(typeof name === "object"){ result = param; }else if(typeof name === "string"){ result = param[name] && decodeURIComponent(param[name]); }else{ result = Object.keys(param); } return !!result ? result : ''; }, //获取当前页面名,带后缀 getFullPageName : function() { //return location.href.split('?').shift().split('/').pop(); var q = location.href.indexOf('?'); var s = location.href.lastIndexOf('/') + 1; return q == -1 ? location.href.substring(s) : location.href.substring(s, q); }, //获取当前页面名,不带后缀 getPageName : function() { //return location.href.split('?').shift().split('/').pop().split('.').shift(); var pageName = this.getFullPageName(); return pageName.substring(0, pageName.indexOf('.')); }};
简化,保留取参数
window.Jerry = { getUrlParam : function (name) { var param = null; try{ param = JSON.parse('{"'+ location.search.substr(1).replace(/(=|&)/g, m => ({ "=": '":"', "&": '","'}[m])) +'"}'); }catch(e){ console && console.error && console.error('没有参数,获取失败') } if(!param){ return ''; } return decodeURIComponent(param[name]) || ''; }};
B站版
/** * @description 解析URL参数 * @param url * @returns {string} */function parseQuery (url) { url = url || window.location.href var querys = url.split("?"); var params = querys[1] ? querys[1].split("&") : []; var obj = { }; for(var i = 0; i < params.length; i++){ var param = params[i] || '' var index = param.indexOf('='); obj[param.substr(0, index)] = param.substr(index+1); // var param = params[i].split("="); // obj[param[0]] = param[1]; } return obj;}
再来两个收集的对比下。不记得出处了
/*-----------------实现1--------------------*/function getPar(par){ //获取当前URL var local_url = document.location.href; //获取要取得的get参数位置 var get = local_url.indexOf(par +"="); if(get == -1){ return false; } //截取字符串 var get_par = local_url.slice(par.length + get + 1); //判断截取后的字符串是否还有其他get参数 var nextPar = get_par.indexOf("&"); if(nextPar != -1){ get_par = get_par.slice(0, nextPar); } return get_par;} /*--------------------实现2(返回 $_GET 对象, 仿PHP模式)----------------------*/var $_GET = (function(){ var url = window.document.location.href.toString(); var u = url.split("?"); if(typeof(u[1]) == "string"){ u = u[1].split("&"); var get = { }; for(var i in u){ var j = u[i].split("="); get[j[0]] = j[1]; } return get; } else { return { }; }})(); /*第2种方式, 使用时, 可以直接 $_GET['get参数'], 就直接获得GET参数的值*/
参考资料
转载地址:https://jerryjin.blog.csdn.net/article/details/83444408 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年05月01日 01时48分05秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
四线触摸屏原理
2019-04-30
小议Linux staging tree
2019-04-30
C/C++如何返回一个数组/指针
2019-04-30
腾讯AI语音识别API踩坑记录
2019-04-30
YbtOJ——递推算法【例题4】传球游戏
2019-04-30
YbtOJ——字符串处理【例题1】数字反转
2019-04-30
转trt步骤记录
2019-05-01
MatConvNet安装
2019-05-01
依赖错误
2019-05-01
ROS安装与卸载
2019-05-01
openrave安装
2019-05-01
安装openrave 0.9的各种依赖包
2019-05-01
trajopt代码使用
2019-05-01
kpm代码使用细节
2019-05-01
redis
2019-05-01
@FeignClient注解的重复名称解决
2019-05-01
ClassFile之Methods
2019-05-01
java.net.BindException: 无法指定被请求的地址
2019-05-01
scala list
2019-05-01