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

(?:  #(.*)   )?