Element 的神奇用法

前言

  最近在找 URL 的正則表達式時意外發現 Element 的神奇用法，在此做個紀錄。

內容

  範例如下

var a = document.createElement('a');
 a.href = 'http://www.example.com:123/foo/bar.html?fox=trot#foo';

 ['href','protocol','host','hostname','port','pathname','search','hash'].forEach(function(k) {
    console.log(`${k}:${a[k]}`);
 });
//href:http://www.example.com:123/foo/bar.html?fox=trot#foo
//protocol:http:
//host:www.example.com:123
//hostname:www.example.com
//port:123
//pathname:/foo/bar.html
//search:?fox=trot
//hash:#foo

範例使用 Element 來解析 URL ， 先造好 Element ，在賦予 URL ，接著就可以透過陣列的方式取得 URL 的各項解析，要注意的是 [0] 代表的是完整的 URL ，從 [1] 開始才是各項解析。

參考資料

[ tw.coderbridge.com ] 獲取URL的一部分(正則表達式) (Getting parts of a URL (Regex))