分 享

正则获取URL参数

之前有一次面试的时候,一道面试题是取url参数,当时傻傻的取完url之后用?截取然后=拆数组,被自己蠢哭,所以特意发出来正确的做法,避免大家遇到这种情况

转自:https://www.cnblogs.com/elexiang/p/4732364.html

一 获取指定URL参数

function getUrlParams(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
    var r = window.location.search.substr(1).match(reg);  
    if (r != null) return unescape(r[2]); 
  return null; 
}

window.location = "http://www.baidu.com?name=elephant&age=25&sex=male";
var name = getUrlParams("name"); //elephant
var age = getUrlParams("age");   //25
var sex = getUrlParams("sex"); //male

  首先理解定义的正则表达式,(^|&)意思是从头开始匹配字符&, =([^&]*)意思是匹配=后面零个或多个不是&的字符,直至碰到第一个&为止,(&|$)意思就是匹配最后一个&,在正则表达式中,增加一个()代表着匹配数组中增加一个值, 因此代码中的正则匹配后数组中应包含4个值, 在getUrlParams("name")函数中,此时 r 获取到的数组应该是 ["name=elephant&", "", "elephant", "&"]

  代码中 window.location.search 意思是取window.location中 '?'后面的值包括'?',因此所得到的值是"?name=elephant&age=25&sex=male"

  substr()这个函数的作用是截取字符串,在代码中window.location.search.surstr(1) 意思就是截取第一个字符后面的字符串,所得到的值即是"name=elephant&age=25&sex=male" 

  unescape这个函数的作用是解码escape编码后的字符串

二 获取所有的URL参数

  

function parse_url(_url){ //定义函数
  var pattern = /(\w+)=(\w+)/ig;//定义正则表达式
  var parames = {};//定义数组  url.replace(pattern, function(a, b, c){
    parames[b] = c;
  });
  return parames;//返回这个数组.}

var  url = "http://www.baidu.com?name=elephant&age=25&sex=male" 
var params = parse_url(url);// ["name=elephant", "age=25", "sex=male"]

  当replace匹配到name=elephant时.那么就用执行function(a,b,c);其中a的值为:name=elephant,b的值为name,c的值为elephant;(这是反向引用.因为在定义正则表达式的时候有两个子匹配.),然后将数组的key为name的值赋为elephant;然后完成.

  再继续匹配到age=25;此时执行function(a,b,c);其中a的值为:age=25,b的值为age,c的值为25;然后将数组的key为id的值赋为25。





0 评论

回复