JavaScript URL参数读取改进版


Posted in Javascript onJanuary 16, 2009

下面是三水点靠木一直也在用的几种方法

<script language="javascript" type="text/javascript"> 
function request(paras){ 
var url = location.href; 
var paraString = url.substring(url.indexOf("?")+1,url.length).split("&"); 
var paraObj = {} 
for (i=0; j=paraString[i]; i++){ 
paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length); 
} 
var returnValue = paraObj[paras.toLowerCase()]; 
if(typeof(returnValue)=="undefined"){ 
return ""; 
}else{ 
return returnValue; 
} 
} 
//下面是应用代码 
var theurl 
theurl=request("url"); 
if (theurl!=''){ 
location=theurl 
} 
</script>

下面是正则函数
用Javascript正则实现url链接的解析类
https://3water.com/article/15000.htm

下面的代码有点乱
/* 《JavaScript权威指南》介绍的更简洁的取 URL 参数的方法,不用正则表达式,用一次循环。一次性返回一个对象的好处是只需要调用一次此函数,参数和值对可以存在一个对象里,以后再取其它参数的值就不用再调用此函数了,只要取对象的属性就行了。

* 用法: 
* var args = getArgs( ); // 从 URL 解析出参数 
* var q = args.q || ""; // 如果定义了某参数,则使用其值,否则给它一个默认值 
* var n = args.n ? parseInt(args.n) : 10; 
*/ 
var getArgs = function () 
{ 
var args = new Object( ); //声明一个空对象 
var query = window.location.search.substring(1); // 取查询字符串,如从 http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor 中截出 a1=v1&a2=&a3=v3。 
var pairs = query.split("&"); // 以 & 符分开成数组 
for(var i = 0; i < pairs.length; i++) { 
var pos = pairs[i].indexOf('='); // 查找 "name=value" 对 
if (pos == -1) continue; // 若不成对,则跳出循环继续下一对 
var argname = pairs[i].substring(0,pos); // 取参数名 
var value = pairs[i].substring(pos+1); // 取参数值 
value = decodeURIComponent(value); // 若需要,则解码 
args[argname] = value; // 存成对象的一个属性 
} 
return args; // 返回此对象 
}

它的突出优点就是程序只用执行一次提取操作,以后再重复取参数值,都不用再执行程序了。取 URL 参数还是这样比较简便易行,又好理解。

下面是我此前发表的“不用循环”但“有些太复杂”的版本:

//不用循环纯用正则实现从 URL 中取参数的值。取代循环的核心技术是字符串的 replace() 方法可以用函数作第二参数,按用户定义的方式去替换。 
//若有此参数名但无值,则返回空字符串;若无此参数名,返回 undefined。 
var getArg = function(argname) 
{ 
var str = location.href; 
var submatch; 
//先从 URL 中取出问号和井口与之间的查询字符串,如从 http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor 中截出 a1=v1&a2=&a3=v3。 
//问号是模式的特殊字符,所以要写成 \?;井号可有可无,所以模式结尾是 #? 
if (submatch = str.match(/\?([^#]*)#?/)) 
{ 
//取到捕捉的子匹配形如 a1=v1&a2=&a3=v3,在前面加个 & 做成规则的 &a1=v1&a2=&a3=v3 便于下一步替换 
var argstr = '&'+submatch[1]; 
//做个替换用的函数,把找到的每组形如 &a1=v1 替换成 a1:"v1", 这样的对象定义用的属性声明 
var returnPattern = function(str) 
{ 
//$1 和 $2 代表捕捉到的第1个和第2个子匹配,必须用在字符串里 
return str.replace(/&([^=]+)=([^&]*)/, '$1:"$2",'); 
} 
//执行一个全局的正则替换,第二参数就是刚才定义的替换函数,把 a1=v1&a2=&a3=v3 替换成 a1:"v1",a2:"",a3:"v3", 
argstr = argstr.replace(/&([^=]+)=([^&]*)/g, returnPattern); 
//最后再执行一个对象的声明,需要形如 var retvalue = {a1:"v1",a2:"",a3:"v3"}; 的对象声明,而刚才替换完的字符串结尾还有个逗号,把结尾的逗号用 substr 截掉即可 
eval('var retvalue = {'+argstr.substr(0, argstr.length-1)+'};'); 
//现在就得到了一个对象,URL 中每个参数名是其属性名,参数值是对应的属性值 
return retvalue[argname]; 
} 
} //测试 
document.write('a1='+getArg('a1')+', a2='+getArg('a2')+', a3='+getArg('a3'));
Javascript 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 #Javascript
解javascript 混淆加密收藏
Jan 16 #Javascript
js 浮动层菜单收藏
Jan 16 #Javascript
jquery中常用的SET和GET
Jan 13 #Javascript
JavaScript 私有成员分析
Jan 13 #Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 #Javascript
JavaScript delete操作符应用实例
Jan 13 #Javascript
You might like
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php代码书写习惯优化小结
2013/06/20 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Python中表示字符串的三种方法
2017/09/06 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python3 enum模块的应用实例详解
2019/08/12 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
python实现简单的学生管理系统
2021/02/22 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
研究生求职推荐信范文
2013/11/30 职场文书
初一学生期末评语
2014/04/24 职场文书
本科生自荐信
2014/06/18 职场文书
学习雷锋标语
2014/06/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
党内外群众意见范文
2015/06/02 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
python套接字socket通信
2022/04/01 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers