• 1、纯字符串方法截取URL问号传参以及哈希值处理
• 2、正则方法截取URL问号传参以及哈希值处理(最简单)
• 3、动态创建a标签法处理URL问号传参以及哈希值处理
• 面试题

7、前端URL参数获取（3种方法）

1、纯字符串方法截取URL问号传参以及哈希值处理

function mystringURL(url) {
	var obj={}, wellIndex=url.indexOf('#'),askIndex= url.indexOf("?");
  //如果没有传参也没有哈希值则直接返回obj;
  if (askIndex === -1 && wellIndex === -1) return obj;
  //先处理哈希值如果有直接存入obj中,如果没有则把'#'号的长度改为字符串的长度（后面要用）;
  wellIndex>-1 ? obj.hash = url.slice(wellIndex + 1) : wellIndex=url.length;
  //如果没有问号传参直接返回obj;
  if (askIndex === -1) return obj;
  //接下来是有问号传参的处理:截取字符串并拆分为数组
  var ary= url.slice(askIndex + 1, wellIndex).split(/&|=/g);
  for (var i = 0; i < ary.length; i += 2) {
  obj[ary[i]] = ary[i + 1];
  }
  return obj;
}

2、正则方法截取URL问号传参以及哈希值处理(最简单)

// 1、以一个方法的形式实现
function myRegExpURL(url) {
  var obj = {},wellIndex=url.indexOf('#');
  //有哈希值的处理：正则方法直接将'#'替换为'&hash='，方便后面的替换
  wellIndex > -1 ? url = url.replace(/#/, '&hash=') : null;
  //没有传参的话只把哈希属性加入obj，传递了参数的话每个属性都加入；
  let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g;
  url.replace(reg, function () {
    obj[arguments[1]] = arguments[2];
  })
  return obj;
}

//  2、直接扩展到String的原型上
//  往原型上扩展的时候要注意this的问题
String.prototype.myQueryURLParameter=function () {
  //由于this不能直接赋值，所以要定义一个变量接收一下；
  let obj={},that=this,wellIndex=this.indexOf('#');
  wellIndex>-1?that=this.replace(/#/,'&hash='):null;
  let reg=/[?&]([^?=&]+)(?:=([^?&=]*))?/g;
  that.replace(reg,function () {
      obj[arguments[1]]=arguments[2];
  });
  return obj;
};
let str='http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e#teacher';

/* 处理后得到结果：
{a: "1", b: "2", c: "", d: "xxx", e: undefined, hash:"teacher"}
如何使用：
第一种方法：let val=myRegExpURL(str);
第二种方法：let val=str.myQueryURLParameter();
两个val的结果都是：{a: "1", b: "2", c: "", d: "xxx", e: undefined, hash:"teacher"} 
*/

3、动态创建a标签法处理URL问号传参以及哈希值处理

function myAURL(url) {
	//动态创建a标签并将url赋值给a标签的href属性
	var link = document.createElement('a'),
		obj = {};
	link.href = url;
	var hash=link.hash.slice(1),search = link.search.slice(1);
	//先处理是否有哈希值有的话直接加入
	hash.length>0?obj.hash=hash:null;
	//判断是否有问号传参（利用a标签的search属性可直接获取'？'以及后面的参数），长度为0直接返回obj；
	if(search.length===0)return obj;
		//截取字符串并按正则拆分为数组
	search=search.split(/&|=/g);
	//循环拆分后的数组然后添加到属性名中，
	for (var i = 0; i < search.length; i+=2) {
  obj[search[i]]=search[i+1];
  }
  link = null;
  return obj;
}

面试题

var str='http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e#teacher';
// 处理后得到结果：
{a: "1", b: "2", c: "", d: "xxx", e: undefined, hash:"teacher"}


// 正则处理实现
function urlRegExp(url) {
  var obj={},wellIndex=url.indexOf('#');
  //单独处理哈希值
  wellIndex>-1?url=url.replace(/#/,'&hash='):null;
  let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g;
  url.replace(reg,function () {
      obj[arguments[1]]=arguments[2];
  });
  return obj;
}


// 字符串截取实现
function strUrl(url) {
  let obj={},wellIndex=url.indexOf('#');
  //单独处理哈希值
  wellIndex>-1?url=url.replace('#','&hash='):null;
  let [,para]=url.split('?'),
  paraAry=para.split('&');
  for (let i = 0; i < paraAry.length; i++) {
    let ary=paraAry[i].split('=');
    obj[ary[0]]=ary[1];
  }
  return obj;
}
console.log(urlRegExp(str));
console.log(strUrl(str));