Chapter 10. Pattern Matching with Regular Expressions

A summary of chapter 10 of "JavaScript: The Definitive Guide"

Transcript

1. CHAPTER 10. PATTERN MATCHING WITH REGULAR EXPRESSIONS Elvis Lin @KKday 2018-07-31
2. ⽂文字的模式 ▸ 下⾯面這段⽂文字的模式是什什麼？ ▸ 1234_5678_90 ▸ 可能的答案 ▸ 1234_5678_90 ▸ 四個數字 底線 四個數字 底線 兩兩個數字 ▸ 介於上述兩兩者之間的格式
3. REGULAR EXPRESSION — 
 A SEQUENCE OF CHARACTERS THAT DEFINE A SEARCH PATTERN. 維基百科(Wikipedia)
4. 定義 REGULAR EXPRESSIONS (1/2) var pattern = /s$/; ▸ 使⽤用 Regular Expression Literals ▸ 使⽤用 RegExp 物件 var pattern = new RegExp("s$");
5. 定義 REGULAR EXPRESSIONS (2/2) var pattern1 = /s$/; var pattern2 = /s$/; 
 pattern1 === pattern2 >> false ▸ 相同的 Regular Expression Literals 會回傳不同的物件
6. REGULAR EXPRESSION 的基本形式 ▸ /java/ ▸ 表⽰示字串串需要含有 java ▸ /s$/ ▸ s 表⽰示字串串需要含有 “s” ▸ $ 表⽰示 “s” 的位置需要出現在字串串的尾端
7. LITERAL CHARACTERS Characters Matches 英⽂文或數字 Itself \0 The NULL character (\u0000) \t Tab (u0009) \n Newline (\u000A) \v Vertical tab (\u000b) \f Form feed (\u000C) \r Carriage return (\u000D) \x nn ⼗十六進位表⽰示的拉丁字元 \u xxxx ⼗十六進位表⽰示的 Unicode 字元 \c X 控制字元
8. LITERAL CHARACTERS ▸ 有特殊意義的符號 ▸ ^ $ . * + ? = ! : | \ / ( )[ ] { } ▸ 如果想要直接尋找特殊符號 ▸ 在前⾯面加上 \ ▸ /\?/ 尋找含有問號的字串串 ▸ /\\/ 尋找含有反斜線的字串串
9. CHARACTER CLASSES Characters Matches […] 任⼀一⼀一個包含的字元 [^…] 任⼀一⼀一個不包含的字元 . 除了了換⾏行行字元的任何字元 \w 任何 ASCII 字元，[a-zA-Z0-9_] \W 任何不是 ASCII 的字 \s 任何 Unicode 的空⽩白字元 \S 任何不是 Unicode 空⽩白字元的字元 \d 任何數字，[0-9] \D 任何非數字，[^0-9] [\b] 退格字元、倒退字元（backspace）
10. CHARACTER CLASSES ▸ /[abc]/ ▸ 字元 a 或字元 b 或字元 c ▸ /[^abc]/ ▸ 字元 a, b 或 c 以外的任何字元
11. CHARACTER CLASSES > /abc/.test("a") false > /[abc]/.test("a") true > /[^abc]/.test("a") false > /[^abc]/.test("z") true > /[\w]/.test("a") true > /[^\w]/.test("a") false > /[\W]/.test("a") false
12. REPETION ▸ /\d/ ▸ 1 個字元是數字 ▸ /\d\d\d\d\d/ ▸ 5 個字元都是數字 ▸ /\d{5}/ ▸ 同上，5個字元都是數字
13. REPETION Characters Matches { n , m } 重複次數在 n 與 m 之間 { n , } 重複次數⼤大於等於 n { n } 重複字數剛好 n 次 ? 重複次數 0 次或 1 次 + 重複字數 1 次以上 * 重複次數 0 次以上
14. REPETION ▸ /\d{2,4}/ ▸ 2 到 4 個數字 ▸ /\w{3}\d?/ ▸ 3 個 ASCII 字元接著 1 個或 0 個數字 ▸ /\s+java\s+/ ▸ 在 java 的前後各有⼀一個或多個空⽩白字元 ▸ “java” 不符合 ▸ “ java ” 符合
15. GREEDY REPETITION V.S. NONGREEDY REPETITION ▸ 預設的搜尋⽅方式是 greedy，所以會找出符合 pattern 的最長 字串串 ▸ 在 repetion 字元後⾯面加上問號（?），搜尋的⽅方式會改成 non-greedy，會找出最短的字串串。但是起點不會移動。 /a+b+/.exec("aaabbb") // [ 'aaabbb', index: 0, input: 'aaabbb' ]
 /a+?b+/.exec("aaabbb") // [ 'aaabbb', index: 0, input: 'aaabbb' ]
 /a+b+?/.exec("aaabbb") // [ 'aaab', index: 0, input: 'aaabbb' ]
16. ALTERNATION, GROUPING, AND REFERENCES Characters Matches | 符合左側或右側的 pattern (…) 將符合的字串串合成⼀一個單位，並且記錄下來來 (?:…) 將符合的字串串合成⼀一個單位，但是不記錄下來來 \ n 取得「之前記錄下來來的字串串」
17. ALTERNATION, GROUPING, AND REFERENCES ▸ /ab|cd|ef/ ▸ 含有 ab 或 cd 或 ef 的字串串 ▸ /java(script)?/ ▸ 含有 java 或 javascript 的字串串 ▸ /[a-z]+(\d+)/ ▸ 含有⼀一組英⽂文字⺟母接續著數字的字串串 ▸ 可以⽤用 \1 取得數字的部分
18. ALTERNATION, GROUPING, AND REFERENCES ▸ /[‘“][^’”]*[‘“] ▸ 找出由引號夾住的字串串 ▸ 單引號跟雙引號可能沒有成對 ▸ /([‘“])[^’”]*\1/ ▸ 找出由成對的引號夾住的字串串 ▸ /([‘“])[^\1]*\1/ ▸ 上⾯面的寫法不合法 ▸ 不可以在中括號中使⽤用 reference, \1
19. SPECIFYING MATCH POSITION Characters Matches ^ 在字串串的開頭，或在多⾏行行模式中的每⼀一⾏行行的開頭 $ 在字串串的結尾，或在多⾏行行模式中的每⼀一⾏行行的結尾 \b 單字的邊界 \B 不是單字的邊界 (?=p) A positive lookahead assertion (?:p) A negative lookahead assertion
20. SPECIFYING MATCH POSITION > /^JavaScript$/.test("JavaScript") true > /^JavaScript$/.test("JavaScript is fun") false
 > /^JavaScript(?=\:)/.test("JavaScript: It is fun") true > /^JavaScript(?=\:)/.exec("JavaScript: It is fun") [ 'JavaScript', index: 0, input: 'JavaScript: It is fun' ] > /^JavaScript(\:)/.exec("JavaScript: It is fun") [ 'JavaScript:', ':', index: 0, input: 'JavaScript: It is fun' ]
21. FLAG Characters Matches I Case-insensitive matching g Perform a global match m 多⾏行行模式
22. FLAG > /javascript/.test("JavaScript") false > /javascript/i.test("JavaScript") true > var reg = /java/g undefined > reg.exec("javascript is not java") [ 'java', index: 0, input: 'javascript is not java' ] > reg.exec("javascript is not java") [ 'java', index: 18, input: 'javascript is not java' ] > /^Java/.test("Hello\nJava") false > /^Java/m.test("Hello\nJava") true
23. STRING METHOD FOR PATTERN MATCHING ▸ search ▸ 找到時回傳字串串起點的位置，找不到時回傳 -1 ▸ replace ▸ 取代字串串 ▸ match ▸ 所有符合的字串串
24. THE REGEXP OBJECT PROPERTIES ▸ source ▸ global ▸ ignoreCase ▸ multiline ▸ lastIndex
25. THE REGEXP OBJECT METHODS ▸ exec ▸ 回傳搜尋得到的結果 ▸ test ▸ 如果有符合的結果，回傳 true ▸ 如果沒有符合的結果，回傳 false
26. 線上練習 REGULAR EXPRESSION 的⼯工具 ▸ https://regexr.com ▸ https://regex101.com
27. THANK YOU :)
28. 參參考資料 ▸ Regular Expressions
 https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Guide/Regular_Expressions ▸ 來來⾃自 Mozilla 的教學⽂文件，介紹得蠻仔細的 ▸ Regular Expressions!
 https://ryanstutorials.net/regular-expressions-tutorial/ ▸ Node.js 官⽅方網站
 https://nodejs.org/en/