第一种 通过正则获取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. linux中压缩解压缩命令

    目录 gzip gunzip tar(打包压缩) tar(解包解压) zip unzip bzip2 bunzip2 gzip 解释 命令名称:gzip 命令英文原意:GUN zip 命令所在路径:/ ...

  2. Gartner评估:众包将掀起IT服务市场的革命

    国际IT顾问与咨询公司Gartner发布评估报告,称众包是中国的一种新兴业务模式,将掀起IT服务市场的革命.然而,只有很少的的服务提供商会构建众包平台来尝试使用该业务模式.IT服务提供商的业务部门负责 ...

  3. Pycharm每次新建工程都要重新安装相关库的解决办法

    之前自己每次重建工程时,都不厌其烦的重新安装了第三方的库,直接在pycharm的terminal中利用pip安装,或者鼠标放在所需库的红色波浪线上 直接点击Install Package XXX 后面 ...

  4. JSOI部分题解

    JSOI部分题解 JSOI2018 战争 问题转化为给定你两个凸包\(\mathbb S,\mathbb T\),每次独立的询问将\(\mathbb T\)中的每个点移动一个向量,问\(\mathbb ...

  5. Vue(八)---组件(Component)

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 注册一个全局组件语法格式如下: Vue.component(tagName, optio ...

  6. cat - EOF标志的使用

    前提 cat命令是用于连接文件并输出到标准输出设备或指定文件中. EOF为标志,可以替换为其他字符串 代码块 ``` 将文件内容作为标准输出也就是将文件内容输出到屏幕中,也可写作 cat filena ...

  7. Can you answer these queries? HDU - 4027 有点坑

    #include<iostream> #include<cstring> #include<cstdio> #include<math.h> #incl ...

  8. C#中类的编程规范

    C#中类的编程规范,或许这是一个好习惯. using System; using System.Collections.Generic; using System.Linq; using System ...

  9. Python3标准库:array数组

    1. array数组 array模块定义了一个序列数据结构,看起来与list很相似,只不过所有成员都必须是相同的基本类型.支持的类型包括所有数值类型或其他固定大小的基本类型(如字节). 代码 类型 最 ...

  10. ng-指令

    在 Angular 中最常用的指令分为两种,它们分别是 属性型指令 和 结构型指令. NgClass 作用:添加或移除一组 CSS 类 NgStyle 作用:添加或移除一组 CSS 样式 NgMode ...