js正則表達式詳解－子匹配 匹配原理 例子講解

博主之前認爲已經掌握了正則，但是最近在解析url的各項時，才發現正則表達式的博大精深，下面博主將通過一個很好的例子來講解正則表達式的匹配過程，其他博客都不會有，希望對像我一樣對技術熱愛的人有幫助～
例子如下：

解析 URI:輸入一個 URI,輸出一個 object,請用 JavaScript 解析 URI,並把解析出來的各個 部分存在一個 object 對象中返回。需要解析的部分包括:
scheme:協議,字符串類型;
host:主機名/IP,字符串類型;
port:端口,整數類型; path:路由,字符串類型; queries:請求參數,object 類型,存鍵值對; hash:字符串類型;
例如,給定 URI 爲 https://www.example.com:8080/a/b/c?q=234&p=abc#header,返回: {
“scheme”: “https”,
“host”: “www.example.com”,
“port”: 8080,
“path”: “/a/b/c”,
“queries”: {
“q”: “234”,
“p”: “abc” },
“hash”: “header” }

下面是我的代碼：

function getQueryItems(url){
  var reg = /^(?:([A-Za-z]+):)?(?:\/{0,3})([A-Za-z.\-0-9]+)(?::(\d+))?(\/[^#?]*)?(?:\?([^#]*))?(?:#(.*))?$/;

  var result = url.match(reg);  //result中存儲分解下來的結果
  console.log(result);
  var output = {};   //返回的結果
  var item = ["scheme","host","port","path","queries","q","p","hash"];
  //由於得到的鍵值對需要單獨處理，所以先賦值前四項
  for(var i=1;i<5;i++){
    output[item[i-1]] = result[i];
  }

  //分解鍵值對
  var queries = result[5];  //queries存儲得到的鍵值對
  var keyValues = queries.split("&");  //keyValues存儲進一步分解結果 ["q=234", "p=abc"]
  var querySplit = {};    //存儲得到的鍵和值對象  {q: "234", p: "abc"}
  for(let j=0;j<keyValues.length;j++){
    querySplit[keyValues[j].split("=")[0]] = keyValues[j].split("=")[1];
  }
  output["queries"] = querySplit;

  //將id加到對象中
  output["hash"] = result[6];
  console.log(output);
}

getQueryItems("https://www.example.com:8080/a/b/c?q=234&p=abc#header")

有點編程基礎的小夥伴應該能看懂吧 （逃～

下面就重點說一下其中的正則吧～

首先說明一下子匹配的原理：
()裏面的內容表示子匹配
(?: )表示這個括號中的子匹配不返回結果

下面是各個匹配：
我用空格分開了匹配的各個部分，應該一眼就能看出原理，就不細說了～

• 1)https:

  (?:  ([A-Za-z]+) : )?

  (?:)表示這個括號表示的子匹配最後不存在結果中， 要加這個最外層括號原因是url開頭的http是可以不要的

• 2）//

  \/{0,3}

• 3)www.example.com

  ([A-Za-z\.0-9]+)

• 4) :8080

  (?: (:[0-9]+) )?

  整個:80都是可有可無的

• 5)/a/b/c

  (?: \/[^#?]* )*

• 6）?name=1&dd=ddd**

  (?:   \?  ([^#]*)  )?

• 8）#header

   (?:  #(.*)   )?