美文网首页让前端飞
最简单的URL解析方法

最简单的URL解析方法

作者: 背着灯笼 | 来源:发表于2016-10-27 15:45 被阅读0次

​ 当我们拿到一个URL字符串,例如: "http://example.com:3000/pathname/?search1=test1&search2=test2#hash", 我们想把它的各个组成部分(protocol, hostname, port......)取出来, 我们该怎么做呢?你能会说, 我们把字符串进行切割, 用正则表达式来做。 是的这样可以, 如果实在客户端解析 URL 的话, 这里有一个简单到令人发指的方法。

我们只需要一个 a 标签就可以完成 URL 的解析。

​ 下面看代码:

function parseURL(url) {
  var parser = document.createElement("a"),
      searchObj = {},
      queries,key, value
      
  parser.href = url
  queries = parser.search.replace(/^\?/, "").split("&")
  queries.forEach((query) => {
    key = query.split("=")[0]
    value = query.split("=")[1]
    searchObj[key] = value
  })
  
  return {
    protocol: parser.protocol,
    host: parser.host,
    hostname: parser.hostname,
    port: parser.port,
    pathname: parser.pathname,
    searchObj: searchObj,
    hash: parser.hash
  }
}

参考链接:

https://gist.github.com/jlong/2428561

相关文章

网友评论

    本文标题:最简单的URL解析方法

    本文链接:https://www.haomeiwen.com/subject/nkpnyttx.html