-
Notifications
You must be signed in to change notification settings - Fork 0
/
12-3.html
122 lines (114 loc) · 4.79 KB
/
12-3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2 id="12-3">12-3 正則表達式 - Lookbehind assertion 反向斷言</h2>
<p>斷言的就是判斷的意思。判斷我們這次的匹配結果是正確還是不正確。</p>
<h3>lookahead assertion 正向斷言</h3>
<p>需求：取出字串中的動態數字。我們可以根據句子中固定的詞句作為擷取點的區分。</p>
<p>
以下案例簡單來說就是由字串中『後面』的內容是不是符合括號內條件，是的話才滿足前面匹配到的數字。
</p>
<pre><code class="language-js">
let str = '你知道最近這3天在城鎮附近大量出沒的神奇寶貝是什麼嗎?'
// \d 數字 , 代表匹配數字緊接後面的某字 符合(?='')或者 不符合(?!''),如果滿足括號內的條件就取出前面匹配到的第一個數字。
const reg = /\d+(?=天)/
reg.exec(str)
// [ '3',
// groups:undefined,
// input: '你知道最近這3天在城鎮附近大量出沒的神奇寶貝是什麼嗎?',
// length: 1
// ]
</code></pre>
<pre><code class="language-js">
// JS Lookahead assertion x(?=y)
const regex = /First(?= test)/g;
console.log("First test".match(regex)); // [ 'First' ]
console.log("First peach".match(regex)); // null
console.log("This is a First test in a year.".match(regex)); // [ 'First' ]
console.log("This is a First peach in a month.".match(regex)); // null
</code></pre>
<pre><code class="language-js">
console.log(/\d+(?!\.)/g.exec("3.141")); // [ '141', index: 2, input: '3.141' ]
</code></pre>
<h3>Lookbehind assertion 反向斷言</h3>
<p>
以跟正向斷言相，反向斷言是由字串中『前面』的內容是不是符合括號內條件，是的話才滿足後面匹配到的數字。
</p>
<pre><code class="language-js">
let str = '你知道最近這3天在城鎮附近大量出沒的神奇寶貝是什麼嗎?'
// \d 數字 , 代表匹配數字緊接前面的某字 符合(?<='') 或者 不符合(?<!''),如果滿足括號內的條件就取出後面匹配到的第一個數字。
const reg = /(?<=這)\d+/
reg.exec(str)
// [ '3',
// groups:undefined,
// input: '你知道最近這3天在城鎮附近大量出沒的神奇寶貝是什麼嗎?',
// length: 1
// ]
</code></pre>
<p>再看看其他反向斷言的案例</p>
<pre><code class="language-js">
const text = 'A quick fox';
const regexpLastWord = /\w+$/;
console.log(text.match(regexpLastWord));
// Expected output: Array ['fox']
const regexpWords = /\b\w+\b/g;
console.log(text.match(regexpWords));
// Expected output: Array ['A', 'quick', 'fox']
const regexpFoxQuality = /\w+(?= fox)/;
console.log(text.match(regexpFoxQuality));
// Expected output: Array ['quick']
</code></pre>
<pre><code class="language-js">
const oranges = ["ripe orange A", "green orange B", "ripe orange C"];
const ripeOranges = oranges.filter((fruit) => /(?<=ripe )orange/.test(fruit));
console.log(ripeOranges); // [ 'ripe orange A', 'ripe orange C' ]
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Assertions"
>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/...Assertions
</a>
</p>
<p>
<a href="https://www.youtube.com/watch?v=rZcZRcxg0XM">
https://www.youtube.com/watch?v=rZcZRcxg0XM
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>