從vue模板解析學習正則表示式
摘要：
前言
最近在看vue的模板解析成render這一塊，順便補一下正則的知識
檔案地址srccompilerparserhtml-parser.js
1. attribute
const attribute = /^\s*([^\s"'<>\/=]+)(...
前言
最近在看vue的模板解析成render這一塊，順便補一下正則的知識
檔案地址srccompilerparserhtml-parser.js
1. attribute
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ 這段正則很長，他的主要作用是匹配標籤裡的指令，可以分幾個分組來解讀 ^\s* ^ 從起始位置開始匹配 \s 空白字元 * 匹配前面的子表示式零到多次 ----> 匹配空白字元，匹配指令名前面的空白符 ([^\s"'<>\/=]+) [^xyz] 反向字符集 + 匹配前面的子表示式一到多次 --->匹配指令名 例: aaa=----> aaaaaa/---> aaa (?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))? ? 匹配前面的子表示式零到一次。 ---> 這個表示式最後有個？，意思就是這個可以不匹配，像是一些屬性是boolean的標籤 "([^"]*)"+ ---> 匹配雙引號， 且中間有值 例： name="aaa" '([^']*)'+ ---> 匹配單引號， 且中間有值例： name='aaa' ([^\s"'=<>`]+ --->匹配不跟引號的情況例： name=aaaa \s*(=)\s* ---> 去掉=左右的空白字元
2. ncname
const ncname = '[a-zA-Z_][\\w\\-\\.]*' \w 查詢單詞字元。單詞字元包括：a-z、A-Z、0-9，以及下劃線。 --->用於識別合法的xml標籤匹配第一個字是[a-zA-Z_]， 之後是\w的情況
3. qnameCapture
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
---> 匹配aaa:aaa的情況
4. startTagOpen
const startTagOpen = new RegExp(`^<${qnameCapture}`)
---> 匹配開始標籤<aaaaa>的話會匹配到<aaaaa
5. startTagClose
const startTagClose = /^\s*(\/?)>/ ---> 匹配結束標籤先是任意數量的空白字元，然後是 />
6. endTag
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
---> 匹配結束標籤注意的一點是 這裡</aaa 我>也能通過，但是這樣的資料在loader哪裡已經報錯了
7. doctype
const doctype = /^<!DOCTYPE [^>]+>/i --->匹配<!DOCTYPE> 宣告標籤