js正則表達式之URL格式匹配

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

協議:// 主機名[:端口]/路徑/[?查詢]/#信息片斷

[;parameters]沒見過 這裏就不做相關匹配了

工具/原料

'use strict';
{
    // URL地址匹配格式： protocol :// hostname[:port] / path / [;parameters][?query]#fragment
    // [;parameters]：這都沒見過這東西，就不匹配了。
    let url = [
        'https://www.baidu.com/',
        'http://192.168.1.1',
        'http://192.168.1.1:8080',
        'https://news.163.com/18/1224/15/E3Q6EJDA0001875N.html#top',
        'https://baidu.com:80/?wd=wq&url=ksks#ddsx2',
        'http://192.168.1.1/p/#name',
        'https://neets.cc/subcriberlist?recommendInventoryId=QNZfMjCRQtS4z8MQrFa7qo'
    ]
        , result = null
        , matcht = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i
        , info = ['完整URL', '協議', '地址', '端口', '路徑', '查詢', '錨點']
    url.forEach((value) => {
        result = matcht.exec(value);
        console.log('---------------------------------------------------------------------------------');
        for (let i = 0; i < result.length; i++) {
            console.log(`${info[i]} = ${result[i]}`);
        }
    })
}

方法/步驟

代碼與執行結果


元字符解釋

    脫字符 ^ ：一行的第一個字符，

    字符組[…]：表示匹配裏面任何一個字符，但是必須要有一個匹配。

    排除字符組 [^…]：表示排除裏面所有字符，

    括號(…)：表示限定或界定

    0-9、a-z:表示取值範圍

    量詞 + ：表示前面那個字符或組至少匹配一次

    量詞 ? : 表示前面那個字符或組匹配0次或1次。

    量詞 * ：表示前面那個字符或組匹配0次或多次。

協議匹配規則

    常見URL協議有http、https等等，所以這裏就做針對http和https的URL地址匹配。

    匹配規則 ：^（https?:\/\/）

主機名匹配規則

    主機名格式爲：xxx.xxx.xxx 或 xxx.xxx 2種形式 由字母或數字組成。

    如：www.baidu.com  baidu.com  127.0.0.1

    匹配規則爲：([0-9a-zA-z.]+)

端口匹配

    端口部分是由冒號開頭後接數值兩部分組成而且web默認端口80是不顯示在後面的，所以就有2種情況存在或不存在。

    如：127.0.0.1:8080  127.0.0.0

    匹配規則爲：(:[0-9]+)?

路徑匹配

    路徑是由字母、數字、斜槓、點組成。在訪問網站首頁時後面沒有路徑地址，所以這塊如果存在就匹配。

    如：/xxx/xxxx/xxx.html 、 /xxx/xxx

    匹配規則爲：([/0-9a-zA-Z.]+)?

查詢字符串匹配

    查詢字符串的格式爲：?xxx=1&ddd=2 或 ?xx=2。由於這塊不是必須項所以在匹配時，如果存在就匹配，不存在就算了。

    匹配規則爲：(\?[0-9a-zA-Z&=]+)?

信息片斷匹配

    信息片斷是由#、字母、數值組成。由於這塊不是必須項所以在匹配時，如果存在就匹配，不存在就算了。

    匹配規則爲：(#[0-9-a-zA-Z]+)?

組合匹配規則

採用i不區別大小寫模式，來簡化一下匹配規則

/^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i