利用数组split方法、正则表达式（reg、零宽断言）拆分URL地址

将该url的每一部分进行拆分：http://localhost:5500/public/index.html?lid=5#top

得到： http    localhost   5500    /public/index.html     ?lid=5     #top

1、split方法拆分

var url = "http://localhost:5500/public/index.html?lid=5#top";
    var arr = url.split("://");
    var protocol = arr[0];  //先按://切割，取第0部分——protocol
    var rest = arr[1];  //剩余部分保存在变量rest中继续执行后续操作
    var arr = rest.split("#");  //再按#切割，取第1部分——hash
    var hash = `#${arr[1]}`;
    rest = arr[0];
    var arr = rest.split("?");  //再按?切割，取第1部分——search
    var search = arr[1];
    rest = arr[0];
    var arr = rest.split("/");  //再按/切割
    var host = arr.shift();  //将数组第一个元素踢出数组——主机名+端口号
    var pathname = "/" + arr.join("/");  //将剩余部分按/拼接形成相对路径
    var arr = host.split(":")  //将host再按:切割，分成主机名和端口号
    var hostname = arr[0];
    var port = arr[1];

    console.log(protocol);  //http
    console.log(host);  //localhost:5500
    console.log(hostname); //localhost
    console.log(port); //5500
    console.log(pathname); // /public/index.html
    console.log(search); //?lid=5
    console.log(hash); //#top

2、reg正则表达式拆分 - 1

        match方法可将正则中()中的值，单独再放入一个元素中，说以把需要的每一部分，都用()包围

        正则匹配各字段的图解（放在正则表达式中，特殊字符需要用\做转义）：

                

         代码如下：

ar url="http://localhost:5500/public/index.html?uname=dingding&upwd=123456#top";
var reg=/([a-z]+):\/\/([a-z0-9.]+):(\d+)((\/[a-z.]+)+)\?(([a-z]+=[a-z0-9]+&?)+)(#[a-z]+)/i;
//match可将正则中()中的值，单独再放入一个房间中。
var arr=url.match(reg);
console.log(arr);
var protocol=arr[1];
var host=arr[2]+":"+arr[3];
var hostname=arr[2];
var port=arr[3];
var pathname=arr[4];
var search=arr[6];
var hash=arr[8];

console.log(protocol);//http
console.log(host);//localhost:5500
console.log(hostname); //localhost
console.log(port); //5500
console.log(pathname); // /public/index.html
console.log(search); //?lid=5
console.log(hash); //#top

        此方法的缺点：正则中()都会被match方法添加至数组元素中，故会产生多余的一些数据，想要只得到想到的数据，需要根据对应下标进行选择。

3、reg正则表达式拆分 - 2 零宽断言

        (?=://)：代表后面的是://，则选择前面的内容

        (?<=://)：代表前面的是://，则选择后面的内容

        正则匹配各字段的图解（放在正则表达式中，特殊字符需要用\做转义）：

             

         代码如下：

var url="http://localhost:5500/public/index.html?uname=dingding&upwd=123456#top";
var reg=/[a-z]+(?=:\/\/)|(?<=:\/\/)[a-z0-9.]+(?=:)|(?<=:)\d+(?=\/)|\/[a-z/.]+(?=\?)|(?<=\?)[a-z0-9=&]+(?=#)|#[a-z0-9]+/ig;
var arr=url.match(reg);
console.log(arr);
var protocol=arr[0];
var hostname=arr[1];
var port=arr[2];
var pathname=arr[3];
var search=arr[4];
var hash=arr[5];

console.log(protocol);//http
console.log(hostname); //localhost
console.log(port); //5500
console.log(pathname); // /public/index.html
console.log(search); //?lid=5
console.log(hash); //#top