URL解析

參考博文：【基礎進階】URL詳解與URL編碼

一、URI vs URL

URI：(Uniform Resource Identifier 統一資源辨別符)。

URL：(Uniform/Universal Resource Locator 統一資源定位符)。

關系：

• • URI 屬于 URL 更低層次的抽象，一種字元串文本标準。
  • 就是說，URI 屬于父類，而 URL 屬于 URI 的子類。URL 是 URI 的一個子集。
  • 二者的差別在于，URI 表示請求伺服器的路徑，定義這麼一個資源。而 URL 同時說明要如何通路這個資源（http://）。

二、URL

1. URL(Uniform Resource Locator 統一資源定位器) 位址用于描述一個網絡上的資源

2. 基本格式

   protocol://hostname[:port]/pathname[;url-params][?search][#hash]

   • • • protocol：指定低層使用的協定

protocol	通路	用于...
http	超文本傳輸協定	以 http:// 開頭的普通網頁。不加密。
https	安全超文本傳輸協定	安全網頁，加密所有資訊交換。
ftp	檔案傳輸協定	用于将檔案下載下傳或上傳至網站。
file	您計算機上的檔案。

（host=hostname+port）

• • • hostname：域名
    • port：HTTP伺服器的預設端口是80（可以省略）。如果使用了别的端口，必須指明，例如：http://www.cnblogs.com:8080/
    • pathname：通路資源的路徑（包括檔案）
    • url-params：所帶參數
    • search：發送給http伺服器的資料
    • hash：錨

3. 例子：

http://www.myw-ebsite.com/sj/test;id=8079?name=sviergn&x=true#stuff

Schema: http

host.domain: www.mywebsite.com

path: /sj/test

URL params: id=8079

Query String: name=sviergn&x=true

Anchor: stuff

三、解析URL

1. 目的：從URL中提取需要的元素，如host、請求參數等
2. 通常做法：正則比對相應字段
3. 巧妙方法：動态建立一個HTMLAnchorElement對象（a标簽）或 URL對象，利用HTMLAnchorElement對象 或 URL對象 的屬性（詳見URL相關Web APIs），再加上一些正則（見正規表達式）

function parseURL(url) {
    //方法一：動态建立a标簽（HTMLAnchorElement對象）
    var a = document.createElement('a');
    a.href = url;
    //方法二：動态建立URL對象：var a = new URL (url);

    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        hostname: a.hostname,
        port: a.port,
        pathname: a.pathname,
        segments: a.pathname.replace(/^\//,'').split('/'),//先把pathname開頭的/去掉，再把剩餘的根據/進行分割
        file: (a.pathname.match(/([^/?#]+)$/i) || [,''])[1],//若pathname末尾包含不帶/?#的捕獲組，則其為filename；否則，filename為空字元串
        search: a.search,
        params: (function(){
            var ret = {};
            var seg = a.search.replace(/^\?/,'').split('&');
            var len = seg.length;
            for (var i = 0;i<len;i++) {
                if (!seg[i]) { continue; }
                var s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        hash: a.hash.replace('#','')
    };
}      

使用方法：

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.source; // 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

myURL.protocol; // 'http'

myURL.hostname; // 'abc.com'

myURL.port; // '8080'

myURL.pathname; // '/dir/index.html'

myURL.segments; // Array = ['dir', 'index.html']

myURL.file; // 'index.html'

myURL.search; // '?id=255&m=hello'

myURL.params; // Object = { id: 255, m: hello }

myURL.hash; // 'top'