js解析url地址参数

最开始是用字符串的一些方法完成的。感觉有点low

var url = 'http://www.runoob.com/index.php?id=1&image=awesome.jpg#nan'

function getUrlData(url)

{

// 获取第一次碰到？的下标

let why = url.indexOf('?','0')

// 获取出现#的下标

let xiapu = url.indexOf('#','why')

// 截取？后面的字符串

let newStr = url.substring(why+1,xiapu)

// 以&进行拆分

  let vars = newStr.split("&");

  // 遍历数组

  for (let i=0;i<vars.length;i++) {

  // 以=进行拆分

        let pair = vars[i].split("=");

        // key:value

        console.log(pair)

        //key

        console.log(pair[0])

        //value

        console.log(pair[1])

  }

  // 如果#后面有参数

  if(newStr.search(/#/)){

  console.log(url.substring(xiapu,url.length))

  }

}

getUrlData(url);

后来看到了URlSeachParams()，这个是H5 API。又一起优化了一下；其实用第一个应该要显得你js基础好。其实还可以用正则写的，暂时还没有写，后面会更新的。

var url = 'http://www.runoob.com/index.php?id=1&image=awesome.jpg#nan'

function getUrlData(url)

{

// 获取第一次碰到？的下标

let why = url.indexOf('?','0')

// 获取出现#的下标

let xiapu = url.indexOf('#','why')

// 截取？后面的字符串

let newStr = url.substring(why+1,xiapu)

var urlSearchParam = new URLSearchParams(newStr);

for(var param of urlSearchParam) {

  console.log(param);

}

  // 如果#后面有参数

  if(newStr.search(/#/)){

  console.log(url.substring(xiapu,url.length))

  }

}

getUrlData(url);

关于这个，URlSeachParams()可以访问这里。http://www.softwhy.com/article-8925-1.html