第一种 通过正则获取URL中指定的参数

/**
* 获取指定的URL参数值
* URL:http://www.xxx.com/index?name=123
* 参数:param URL参数
* 调用方法:getParam("name")
* 返回值:123
* alert(getParam('date'));
*/
function getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  //search,查询?后面的参数,并匹配正则
var r = location.search.substr(1).match(reg);
  if (r != null) return decodeURI(decodeURI(r[2]));
}

第二种 既可以获取URL中全部参数,也可以获取单个参数

/**
* js获取url参数值
* 思路,通过location的search获取url中问号后面的值,字符串过滤掉问号,再通过split方法分割参数集合、循环赋值、匹配对应的参数,最后返回值
* URL:http://www.xxx.com/index?name=123
* 参数:param URL参数
* 调用方法:getUrlParams("name")
* 返回值:123
* alert(getUrlParams('date'));
*/
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); //

第三种 获取URL中的参数名及参数值的集合

/**
* [获取URL中的参数名及参数值的集合]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} urlStr [当该参数不为空的时候,则解析该url中的参数集合]
* @return {[string]} [参数集合]
*/
function GetRequest(urlStr) {
if (typeof urlStr == "undefined") {
var url = decodeURI(location.search); //获取url中"?"符后的字符串
} else {
var url = "?" + urlStr.split("?")[1];
}
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
 var parms_1 = GetRequest();
2 console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
3 console.log(parms_1['name']); // '小明'
4 var parms_2 = GetRequest('http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明');
5 console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
6 console.log(parms_2['name']); // '小明'

第四种 通过参数名获取url中的参数值

/**
* [通过参数名获取url中的参数值]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} queryName [参数名]
* @return {[string]} [参数值]
*/
function GetQueryValue(queryName) {
var query = decodeURI(window.location.search.substring(1));
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == queryName) { return pair[1]; }
}
return null;
}
1 var queryVal=GetQueryValue('name');
2 console.log(queryVal);// 小明

js获取URL里的参数的更多相关文章

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

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

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

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

  3. js获取URL中的参数

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

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

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

  5. js获取url传递得参数

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

  6. js获取url地址的参数的方法

    js获取url参数值 今天说一下如何获取url参数值. 思路 通过location的search就可以获取到url中问号后面的值. 字符串过滤到问号 通过split方法分割参数集合 循环赋值 匹配对应 ...

  7. js获取url中的参数对象、js生成带参数的url

    // 获取url中的参数,并返回一个对象 $.getRequestData = function() { var url = location.search; //获取url中"?" ...

  8. 使用js获取url里的指定参数

    String.prototype.getQuery = function(name){     var reg = new RegExp("(^|&)"+ name +&q ...

  9. js获取url中的参数,url中传递中文的时候通过js解码的方式

    如果传递的参数是: <a href="${pageContext.request.contextPath}/productdisplay/productDisplay_productD ...

随机推荐

  1. 移动端 location.href 无法成功跳转页面

    最近做的移动端页面在请求成功后要跳转页面,通过location.href实现的跳转.但同事在测试时,安卓机可以成功跳转,苹果IOS确无法成功跳转.   解决办法:在链接后面加一个随机参数,这样就可以跳 ...

  2. 15.Android-实现TCP客户端,支持读写

    在上章14.Android-使用sendMessage线程之间通信我们学习了如何在线程之间发送数据. 接下来我们便来学习如何通过socket读写TCP. 需要注意的是socket必须写在子线程中,不能 ...

  3. O2O外卖玩众包 开放平台难解标准之痛

    开放平台难解标准之痛" title="O2O外卖玩众包 开放平台难解标准之痛">  有一种怪现象一直是国内互联网企业摆脱不了的附骨之疽--不管规模大小,总是削尖了脑 ...

  4. Window 系统 Excel 同时打开两个Excel 文件

    问题 我们在使用 Excel 的时候,经常需要打开多个 Excel 文件,但是默认的话我们是只打开一个窗口的.这样不便于我们操作两个 Excel . 解决办法 下载这个补丁进行安装,下载链接 http ...

  5. JSP开发机票预定系统 源码

    开发环境: Windows操作系统开发工具:MyEclipse+Jdk+Tomcat6+Mysql数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mod ...

  6. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  7. vuex目录配置

    vuex目录配置,即vue-cli开发时目录配置 项目结构 Vuex 并不限制你的代码结构.但是,它规定了一些需要遵守的规则: 应用层级的状态应该集中到单个 store 对象中. 提交 mutatio ...

  8. MySQL 8 用户定义函数

    MySQL Server可以通过创建或者加载UDFs(User-Defined Functions)来扩展服务器功能. 通过CREATE FUNCTION语句加载 UDF,比如: CREATE FUN ...

  9. Python爬虫连载3-Post解析、Request类

    一.访问网络的两种方法 1.get:利用参数给服务器传递信息:参数为dict,然后parse解码 2.post:一般向服务器传递参数使用:post是把信息自动加密处理:如果想要使用post信息,需要使 ...

  10. Android_小账本_筛选功能的实现

    昨天对小账本的相关功能做了完善,新增了筛选功能. 支持对类型.收支项.日期进行修改. 但暂时尚不完善,只能针对相关小项进行筛选,无法连续对小项的结果进行筛选.这一功能预计在本周三进行完善. 相关代码 ...