js获取url参数值

今天说一下如何获取url参数值。

思路

  • 通过locationsearch就可以获取到url中问号后面的值。
  • 字符串过滤到问号
  • 通过split方法分割参数集合
  • 循环赋值
  • 匹配对应的参数值
  • 返回值

封装的方法

function getUrlParams(name) { // 不传name返回所有值,否则返回对应值
var url = window.location.search;
if (url.indexOf('?') == 1) { return false; }
url = url.substr(1);
url = url.split('&');
var name = name || '';
var nameres;
// 获取全部参数及其值
for(var i=0;i<url.length;i++) {
var info = url[i].split('=');
var obj = {};
obj[info[0]] = decodeURI(info[1]);
url[i] = obj;
}
// 如果传入一个参数名称,就匹配其值
if (name) {
for(var i=0;i<url.length;i++) {
for (const key in url[i]) {
if (key == name) {
nameres = url[i][key];
}
}
}
} else {
nameres = url;
}
// 返回结果
return nameres;
}

实例

例如:

const url = 'http://www.abc.com/test.php?id=1&from=index';
var res = getUrlParams();
var res1 = getUrlParams('id');
console.log(res); //  [{id: "1"}, {from: "index"}]
console.log(res1); // 1

写在最后

这是一个比较简单的方法。

js获取url地址的参数的方法的更多相关文章

  1. js获取URL地址的参数

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  2. js获取url中的参数,并保证获取到的参数不乱码

    //网上比较经典的js获取url中的参数的方法 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  3. js 获取url中的参数 修改url 参数 移除url参数

    js 获取url中的参数 修改url 参数 移除url参数 var jsUrlHelper = { getUrlParam : function(url, ref) { var str = " ...

  4. 获取Url地址中参数的3种方法【华为云技术分享】

    获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) var url = 'https://gitbook.cn/gitchat/geekbo ...

  5. APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  6. js获取URL中的参数

    js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中 ...

  7. js获取url传递得参数

    方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  8. js获取URL里的参数

    第一种 通过正则获取URL中指定的参数 /** * 获取指定的URL参数值 * URL:http://www.xxx.com/index?name=123 * 参数:param URL参数 * 调用方 ...

  9. Javascript获取URL地址变量参数值的方法

    今天碰到在做一个动态页面的时候,需要用到 URL 的参数值来作判断,从而决定某一块内容在当前页面是否显示.例如exampe.html?parm1=xxx&parm2=xxx&parm3 ...

随机推荐

  1. eclipse代码自动提示,eclipse设置代码自动提示

    eclipse代码自动提示,eclipse设置代码自动提示 eclipse是很多JAVA开发者基本上都用的工具,用它可以很方便的开发JAVA代码,当编写JAVA代码时,大部分人都是按组合键[Alt+/ ...

  2. 2018.07.04 POJ 1113 Wall(凸包)

    Wall Time Limit: 1000MS Memory Limit: 10000K Description Once upon a time there was a greedy King wh ...

  3. 20155212 2016-2017-2 《Java程序设计》第7周学习总结

    20155212 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 Chapter13 取得系统时间的方法之一是System.currentTimeMillis ...

  4. 测试mktime和localtime_r性能及优化方法

    // 测试mktime和localtime_r性能及优化方法 // // 编译方法:g++ -g -o x x.cpp或g++ -O2 -o x x.cpp,两种编译方式性能基本相同. // // 结 ...

  5. 20170906工作日记--volley源码的相关方法细节学习

    1. 在StringRequest类中的75行--new String();使用方法 /** * 工作线程将会调用这个方法 * @param response Response from the ne ...

  6. (最小生成树) Jungle Roads -- POJ -- 1251

    链接: http://poj.org/problem?id=1251 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2177 ...

  7. oracl中的大数据类型clob

    建表 create table test_name( test_id   number(6) not null, img_data clob ); 在java中该表所对应的po为: class Tes ...

  8. 自己动手绘制ToolBar

    VC MFC工具栏(CToolBar)控件 工具栏 工具栏控件在控件面板里没有对应的选项(图标),但有一个工具栏控件类CToolBar,所以我们如果要创建一个工具栏控件并显示在窗口里的话,只能用代码来 ...

  9. Hdu2181 哈密顿绕行世界问题 2017-01-18 14:46 45人阅读 评论(0) 收藏

    哈密顿绕行世界问题 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  10. Dalvik虚拟机java方法执行流程和Method结构体分析

    Method结构体是啥? 在Dalvik虚拟机内部,每个Java方法都有一个对应的Method结构体,虚拟机根据此结构体获取方法的所有信息. Method结构体是怎样定义的? 此结构体在不同的andr ...