URL解析

URL : 统一资源定位符（Uniform Resource Locator ），用来定位互联网上的资源位置。

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

介绍

常见格式如下：
scheme://host:port/path?query#anchor
https://baike.baidu.com/item/url/110640?fr=aladdin
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL#Browser_compatibility

URL只使用ASCII规定字符，所以如果你的url中含有特殊字符（比如汉字），浏览器通过encodeURI方法转为规定字符。

• scheme 代表模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。常见的有：访问web资源的http，https(用安全套接字层传送的http)，传输文件FTP， 发送邮件mailto，移动端拨号tel。
• host 主机，baidke.baidu.com ,它是ip地址的别名方便记忆。在发起网络请求时，有一步是通过DNS服务器解析域名为ip地址
  
  
  直接通过ip访问也是可以访问到百度首页的。
• port 端口 一台机器上有很多端口，http默认为80端口，https默认为443端口。
• path 路径/zh-CN/docs/Web/API/URL/URL，表示该资源在该ip端口下的某个路径
• query 查询参数，我们常用的get方式请求会带上这个组件
• anchor 锚点，这个值不传到后台，只作为在前台定位锚点，只页面滑动到指定位置。

解析

JavaScript BOM部分提供Location对象接口获取URL中的某些值。

location.href // 当前url的完整路径，如果赋值，则跳转页面
location.protocol // 当前url的scheme
location.host // 当前url的主机名（域名），如果是通过ip访问则是ip地址
location.hostname // 同上
location.host // 当前url的端口号
location.pathname // 当前url的路径,前面有 “/”
location.search // 当前url的查询参数 ?key1=value&key2=value2
location.anchor // 当前页面的锚点 如果是非ASCII字符，则返回url编码

主机，端口数据比较简单，我们常常使用的是search内的查询内容，?key1=value&key2=value2这种格式是不方便前端使用的，需要解析成对象使用方便一些。

// 例如查询参数为 ?key1=value&key2=value2
var str = '?key1=value&key2=value2'

function parseSearch(str) {
  str = str.substr(1)
  var strArr = str.split('&')
  var strObj = {}
  for (var i = 0; i < strArr.length; i++) {
    var item = strArr[i].split('=')
    strObj[item[0]] = item[1]
  }
  return strObj
}
parseSearch(str)
// 返回的是{ key1: "value", key2: "value2" }