• js获取地址栏URL上的参数


    获取地址栏上的URL参数现在最简单通用的方法应该就是下面这种了。
    function getUrlParam (name) {
    	var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return decodeURIComponent(r[2]); return null;
    }
    // 使用方法就是:http://www.test.com?a=123&b=231
    var a = getUrlParam('a')			// a = 123
    var b = getUrlParam('b')			// b = 231
    

    不过这种方法是有缺陷的,它不能识别URL中值带&或=,例如:http://www.test.com?a=1&23&b=231 在这里我们
    a参数定的值为“1&23”,
    如果还用上面的方法获取的话:
    a = 1
    为什么呢,这就要解析一波这个方法的原理

    // 首先是获取URL
    var r = window.location.search.substr(1);
    // window.location.search.substr(1)可以获取URL?后面的字符串例如:http://www.test.com?a=123&b=231得到的会是:a=123&b=231
    // 然后再用正则获取各个参数下的值
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    // 1.这里的(^|&)会匹配开头为空或&的字符
    // 2.+ name + 这里是匹配你要找的参数名
    // 3.([^&]*)这里是匹配“参数=”后面非&的字符
    // 4.(&|$)这里匹配以空或&结束的字符
    // 这里4个条件就把a=123&b=231里的a=123&或&b=231找出来了
    r = r.match(reg);
    // 这里match方法可以把符合正则的字符找出来,是以数组形式给出,例如我们要找的是a的话:
    /*
    	[
    	'a=123&',					// 这里是整个正则匹配出来的
    	'',							// 这里是(^|&)匹配出来的
    	'123',						// 这里是([^&]*)匹配的
    	'&'							// 这里是(&|$)匹配的
    	]
    */
    // 我们需要的就是第三个([^&]*)匹配的字符
    decodeURIComponent(r[2])			// 这里拿到数组的第三个值再用decodeURIComponent转码
    

    -就是如此要是再a=123&中提前遇到&就是提前终止。导致http://www.test.com?a=1&23&b=231 中a的值为1

    那要怎么避免呢,这里就要修改一下正则

    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    // 这里前面的'(^|&)' + name + '='这段还是不变的。
    // 不过([^&]*)这里对&的限制要解除才行。不能让它只匹配非&字符。所以改为([.*])匹配任何字符(这样说可能不是很严谨)
    // (&|$)这里的最后不能通过&或空判断,应该是&xxx=这种结尾。所以改为(&[^&=]+=|$)匹配,这里的意思为&开头=结尾中间夹着非”&和=“的其他字符。这就满足我们的要求了。
    // 最终的正则表达式应该是:
    var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
    // 这里因为(.*)是匹配所有字符,所以会匹配到最后一个符合(&[^&=]+=)的参数停止,这就会有一个问题了,
    // 例如"http://www.test.com?a=1&23&b=231&c=565" 这里去‘a’的时候会取到'1&23&b=231',这里包含了b的。所以这里还要进一步处理只去&b=前面的值。
    // 这里假设取‘a’的值为1&23&b=231
    var a = '1&23&b=231'
    var l = a.match(/&[^&=]+=/)[0]             // 这里会得到第一个匹配‘/&[^&=]+=/’的字符串:'&b='
    a = a.split(l)[0]                          // 这里在根据l分割a,取第一个,就是我们要的了
    // 不过这样匹配不到最后一个参数,因为最后一个是空结尾而不是"&xxx=",所以要写多一个匹配最后一个参数的正则
    var reg = new RegExp('(^|&)' + name + '=(.*)($)');
    

    整个全新的方法是:

    function getUrlParam (name) {
        var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
        var regLast = new RegExp('(^|&)' + name + '=(.*)($)');
        var r = window.location.search.substr(1).match(reg) || window.location.search.substr(1).match(regLast);
        if (r != null) {
          var l = r[2].match(/&[^&=]+=/)
          if (l) {
            return decodeURIComponent(r[2].split(l[0])[0]);
          } else return decodeURIComponent(r[2]);
        }
        return null;
    }
    

    有什么错误请指出。。

  • 相关阅读:
    【jQuery】用jQuery给文本框添加只读属性【readOnly】
    解决embed标签显示在div上层【转藏】
    width:100% 和 max-width:100%; 有区别吗【转藏】
    一位资深程序员的独白
    jQuery 取值、赋值的基本方法【转藏】
    js判断手机端操作系统(Andorid/IOS)
    PhpStrom 和 wamp 配置 xdebug
    php 中 ?? 和 empty 的 区别
    phpSpreadSheet 中 使用的 一些坑
    html td 限制 高度 和 宽度
  • 原文地址:https://www.cnblogs.com/suyuanli/p/8046783.html
Copyright © 2020-2023  润新知