js取url参数

经常用到js取url的参数,记下来。

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}

刚看到笑看风云写的JavaScript面向对象(极简主义法)和一个分解url参数面试题,我作了一下修改,记录下来!!!

修改前:

<script type="text/javascript">
    var url="www.taobao.com?key0=a&key1=b&key2=c";
    
    function parseQueryString(url){
        var str=url.split("?")[1],
            items=str.split("&");
        var arr,name,value;
        for(var i = 0, l = items.length; i < l; i++){
            arr=items[i].split("=");
            name= arr[0];
            value= arr[1];
            this[name]=value;
        }
    }
    var obj=new parseQueryString(url);
    alert(obj.key1)
</script>

修改后:

<script type="text/javascript">
    var url="www.taobao.com?key0=a&key1=b&key2=c";
    var pQString={
        createNew:function(url){
            var str=url.split("?")[1],
                items=str.split("&");
            var arr,name,value;
            for(var i = 0, l = items.length; i < l; i++){
                arr=items[i].split("=");
                name= arr[0];
                value= arr[1];
                this[name]=value;
            }
        }
    }

    var obj=new pQString.createNew(url);
    alert(obj.key1)
</script>

 -----------------------------------------------------------------------------

 感谢  草根程序猿很厉害把这个方法重写了一下,更严密,高效了,最后面在些再学习一下!!!

<script type="text/javascript">
function getQueryString(url) { 
    if(url) { 
        url=url.substr(url.indexOf("?")+1); //字符串截取,比我之前的split()方法效率高
    } 
    var result = {}, //创建一个对象,用于存name,和value
        queryString =url || location.search.substring(1), //location.search设置或返回从问号 (?) 开始的 URL(查询部分)。 
        re = /([^&=]+)=([^&]*)/g, //正则,具体不会用
        m; 
   
   while (m = re.exec(queryString)) { //exec()正则表达式的匹配,具体不会用 
        result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 对编码后的 URI 进行解码
   } 
   
   return result; 
} 
   
// demo 
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c"); 
alert(myParam.key1); 

</script>

注:

1、substr()与substring(start,stop) ,提取字符串中介于两个指定下标之间的字符。

重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。参见http://www.w3school.com.cn/js/jsref_substring.asp

2、location.search.substring(1) ,location.search设置或返回从问号 (?) 开始的 URL(查询部分)。参见http://www.w3school.com.cn/htmldom/prop_loc_search.asp

3、exec() 方法用于检索字符串中的正则表达式的匹配。太强大了,还不会用,参考http://www.w3school.com.cn/js/jsref_exec_regexp.asp

4、使用 decodeURIComponent() 对编码后的 URI 进行解码。参见http://www.w3school.com.cn/js/jsref_decodeURIComponent.asp

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏决胜机器学习

PHP数据结构(三)——运用栈实现括号匹配

PHP数据结构(三)——运用栈实现括号匹配 (原创内容,转载请注明来源,谢谢) 栈在数据结构上是一种特殊的线性表,其限制是仅允许在表的一端进行插入和删除运算,...

4266
来自专栏程序员的知识天地

良好的代码格式反映了程序员的编码能力,好的程序员应该这么编码

大括号的使用约定。如果是大括号内为空,则简洁地写成{}即可,不需要换行;如果 是非空代码块则:

1281
来自专栏CoXie带你学编程

8个Python高效数据分析的技巧

厌倦了定义用不了几次的函数? Lambda表达式是你的救星! Lambda表达式用于在Python中创建小型,一次性和匿名函数对象。 它能替你创建一个函数。

1062
来自专栏有趣的Python

3-玩转数据结构-栈和队列

栈也是一种线性结构;相比数组,栈对应的操作是数组的子集;只能从一端添加元素,也只能从一端取出元素(这一端称之为栈顶)

5782
来自专栏小灰灰

SPI框架实现之旅二:整体设计

SPI框架实现之旅二:整体设计 上一篇简单的说了一下spi相关的东西, 接下来我们准备开动,本篇博文主要集中在一些术语,使用规范的约定和使用方式 设计思路 下...

3318
来自专栏分布式系统和大数据处理

ES6新特性速览

ES6引入了很多新的语言特性和能力,这篇文章仅快速地做一个概览。包括let、解构、箭头函数、模块化、Spread运算符 等。ES6还有很多更深入的内容,有时间再...

1247
来自专栏从流域到海域

《笨办法学Python》 第39课手记

《笨办法学Python》 第39课手记 本节课讲列表的操作,用来做练习的代码中出现了之前用到过的几个函数,是一节复习课。你需要记住它们。 原代码如下: ten_...

1997
来自专栏计算机视觉与深度学习基础

Leetcode 80 Remove Duplicates from Sorted Array II

Follow up for "Remove Duplicates": What if duplicates are allowed at most twic...

1999
来自专栏HTML5学堂

2015.12.03 HTML5真题练习

HTML5学堂:每天一道题,强壮程序员!今日主要涉及昨日题目的解答,以及一道涉及计时器、时间对象的题目。 HTML5真题【2015.12.02】答案解析 昨日真...

3295
来自专栏人工智能

Python数据处理(6)-pandas的数据结构

pandas是本系列后续内容所需要的第三方库,它是基于之前介绍的NumPy构建的,使得Python可以更加简单、方便地完成一系列数据分析工作。 ? 首先,使用下...

2128

扫码关注云+社区

领取腾讯云代金券