-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjs-reg.html
More file actions
173 lines (173 loc) · 42.5 KB
/
js-reg.html
File metadata and controls
173 lines (173 loc) · 42.5 KB
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Js Reg - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="JavaScript regular expression study notes"><meta name=keywords content="JavaScript,regular expression"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/js-reg.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/js-reg.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Js Reg"><meta property="og:description" content="JavaScript regular expression study notes"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2016-12-18T21:56:37+08:00"><meta property="article:modified_time" content="2016-12-18T21:56:37+08:00"><meta property="article:tag" content="RegExp"><meta itemprop=name content="Js Reg"><meta itemprop=description content="JavaScript regular expression study notes"><meta itemprop=datePublished content="2016-12-18T21:56:37+08:00"><meta itemprop=dateModified content="2016-12-18T21:56:37+08:00"><meta itemprop=wordCount content="1556"><meta itemprop=keywords content="JavaScript,regular expression"><meta name=twitter:card content="summary"><meta name=twitter:title content="Js Reg"><meta name=twitter:description content="JavaScript regular expression study notes"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Js Reg</h1><div class=post-meta><span class=post-time>2016-12-18</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>1556 words </span><span class=more-meta>8 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#1basic-concepts>1.Basic concepts</a></li><li><a href=#2-wildcard>2. Wildcard</a></li><li><a href=#3-online-graphics-tools>3. Online graphics tools:</a></li><li><a href=#4-regular-expressions-can-be-supported-in-ide>4. Regular expressions can be supported in IDE:</a></li><li><a href=#5-instantiate-regexp-object-in-javascript>5. Instantiate <code>RegExp</code> object in JavaScript</a></li><li><a href=#6-modifier>6. Modifier:</a></li><li><a href=#7-original-text-characters-and-metacharacters>7. Original text characters and metacharacters:</a></li><li><a href=#8-character-class>8. Character class:</a></li><li><a href=#10-greedy-mode-and-non-greedy-mode>10. Greedy mode and non-greedy mode:</a></li><li><a href=#11-grouping>11. Grouping:</a></li><li><a href=#12-assertion>12. Assertion:</a><ul><li><a href=#13regexp-object-properties>13.RegExp object properties</a></li></ul></li><li><a href=#14regexp-methods-test-exec>14.RegExp methods: test(), exec()</a></li><li><a href=#15-some-regular-operations-search-replace-split-etc-methods-of-string-match-search-replace-split>15. Some regular operations (search, replace, split, etc.) methods of String: match(), search(), replace(), split();</a></li></ul></nav></div></div><div class=post-content><h2 id=1basic-concepts>1.Basic concepts</h2><p>A regular expression (<code>Regular Expression</code>) is a string that defines a rule according to which a series of strings that meet conditions are described and matched.</p><h2 id=2-wildcard>2. Wildcard</h2><p>Find files in the current directory (linux command line)</p><p>find ./ -name *.txt</p><h2 id=3-online-graphics-tools>3. Online graphics tools:</h2><p><a href=https://regexper.com/>https://regexper.com/</a> is a very practical regular expression graphical tool. You can also <a href=https://regexper.com/>download</a> to your local computer to run faster</p><h2 id=4-regular-expressions-can-be-supported-in-ide>4. Regular expressions can be supported in IDE:</h2><p>The editor I use is <code>Sublime Text 3</code>. Use the shortcut key <code>Ctrl+F</code> to search for a string, <code>Ctrl+H</code> to replace a string, and open regular expressions in the upper left corner of the panel called up at the bottom (shortcut key <code>Alt+R</code>)</p><p><a href=http://www.wangxingfeng.com>http://www.wangxingfeng.com</a>
<a href=http://m.wangxingfeng.com>http://m.wangxingfeng.com</a>
<a href=http://cosmic.wangxingfeng.com>http://cosmic.wangxingfeng.com</a>
<a href=http://blog.wangxingfeng.com>http://blog.wangxingfeng.com</a>
<a href=http://img.wangxingfeng.com/1234.jpg>http://img.wangxingfeng.com/1234.jpg</a>
<a href=http://img.wangxingfeng.com/158.png>http://img.wangxingfeng.com/158.png</a>
<a href=https://img.wangxingfeng.com/128744.jpg>https://img.wangxingfeng.com/128744.jpg</a>
<a href=http://img.wangxingfeng.com/1285.jpg>http://img.wangxingfeng.com/1285.jpg</a>
<a href=http://img.wangxingfeng.com/7884.png>http://img.wangxingfeng.com/7884.png</a></p><p>In <code>Sublime</code>, find the <code>jpg</code> file of the <code>http</code> protocol in the <code>url</code> above and remove its protocol header.</p><p>Find What: http://(.+.jpg)
replace with: $1</p><h2 id=5-instantiate-regexp-object-in-javascript>5. Instantiate <code>RegExp</code> object in JavaScript</h2><ol start=5><li><ol><li>Literal:</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d/</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg2</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/[a-zA-Z0-9]/g</span>;
</span></span></code></pre></div><ol start=5><li>2.Constructor:</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> RegExp(<span style=color:#960050;background-color:#1e0010>\</span><span style=color:#a6e22e>d</span>);
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> RegExp(<span style=color:#e6db74>'[a-zA-Z0-9]'</span>, <span style=color:#e6db74>'g'</span>);
</span></span></code></pre></div><h2 id=6-modifier>6. Modifier:</h2><ol start=6><li><p>1.<code>g</code>(global): indicates global matching. If not added, the first string will be matched by default.</p></li><li><p>2.<code>i</code>(ignore case): Indicates ignoring case. If not added, the case will be case-sensitive by default.</p></li><li><p>3.<code>m</code>(multiple lines): indicates multiple lines matching.</p></li></ol><h2 id=7-original-text-characters-and-metacharacters>7. Original text characters and metacharacters:</h2><ol start=7><li><ol><li>Original text character: represents the original meaning of the character, such as <code>a</code> represents the lowercase letter a, and <code>1</code> represents the number 1.</li></ol></li><li><ol start=2><li>Metacharacters: non-alphabetic characters with special meanings in regular expressions, such as asterisk <code>*</code>, question mark <code>? </code>Wait.</li></ol></li><li><ol start=3><li>Commonly used metacharacters and their meanings:</li></ol></li></ol><ol><li>[]: Construct character classes, range classes, etc.;
2) {}: quantifier, indicating the number of characters;
3) (): Construct a group;
4) *: represents any number of characters; can be understood as {0,};
5)? : Indicates that there is at most one character {0,1};
6) +: Indicates that there is at least one character {1,};
7) ^: negation;
8)\n: newline character;
9) \r: carriage return character;
10)\0: null character;
11) \t: horizontal tab character;
12) \v: vertical tab character;
13) \f: form feed character.</li></ol><h2 id=8-character-class>8. Character class:</h2><ol start=8><li><ol><li>Usually, one character in a regular expression corresponds to one character in a string, such as <code>/a/</code> corresponding to the letter a. The metacharacter <code>[]</code> constructs a character class, such as <code>[abc]</code> which can match any one of the characters a, b or c. Enter in the browser debugging interface console:</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'a1b2c3d4a'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/[abc]/g</span>);
</span></span></code></pre></div><p>Will get the matching string:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> [<span style=color:#e6db74>"a"</span>, <span style=color:#e6db74>"b"</span>, <span style=color:#e6db74>"c"</span>, <span style=color:#e6db74>"a"</span>]
</span></span></code></pre></div><ol start=8><li>2 Character class negation:</li></ol><p>Use the metacharacter ^ within <code>[]</code> to create a reverse class, that is, match strings that do not belong to a certain character class. For example, <code>[^abc]</code> matches content that is not the characters a, b, or c.
Enter in the browser debugging interface console:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'a1b2c3d4a'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/[^abc]/g</span>);
</span></span></code></pre></div><p>Will get the matching string:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> [<span style=color:#e6db74>"1"</span>, <span style=color:#e6db74>"2"</span>, <span style=color:#e6db74>"3"</span>, <span style=color:#e6db74>"d"</span>, <span style=color:#e6db74>"4"</span>]
</span></span></code></pre></div><ol start=8><li>3 Scope class:</li></ol><p>1)<code>[a-z]</code> means: any character from a to z;</p><p>Enter in the browser debugging interface console:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'a1b2c3d4a'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/[a-z]/g</span>);
</span></span></code></pre></div><p>Will get the matching string:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> [<span style=color:#e6db74>"a"</span>, <span style=color:#e6db74>"b"</span>, <span style=color:#e6db74>"c"</span>, <span style=color:#e6db74>"d"</span>, <span style=color:#e6db74>"a"</span>]
</span></span></code></pre></div><p>2)<code>[a-zA-Z]</code> means: any character from a to z and A to Z.</p><p>Enter in the browser debugging interface console:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'a1B2Zc3d4'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/[a-zA-Z]/g</span>);
</span></span></code></pre></div><p>Will get the matching string:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> [<span style=color:#e6db74>"a"</span>, <span style=color:#e6db74>"B"</span>, <span style=color:#e6db74>"Z"</span>, <span style=color:#e6db74>"c"</span>, <span style=color:#e6db74>"d"</span>]
</span></span></code></pre></div><ol start=8><li>4 Predefined classes (abbreviation)</li></ol><ol><li>/./ => /[^\r\n]/ Any character except carriage return and line feed characters
2) /\d/ => [0-9] numeric characters
3) /\D/ => [^0-9] non-numeric characters
4) /\s/ => whitespace character
5) /\S/ => non-whitespace characters
6) /\w/ => [a-zA-Z0-9_] word characters (letters, numbers, underscore.
7) /\W/ => [^a-zA-Z0-9_] non-word characters
8) \b: word boundary
9) \B: non-word boundary;</li></ol><ol start=9><li><p>Quantifier: A {} followed by a character indicates the number of times the previous character is repeated.</p></li><li><p>) /\d{1,20}/: 1~20 numbers;
2.) /\d*/ => /\d{0,}/: any number;
3.) /\d+/ => /\d{1,}/ : at least one number;
4.) /\d?/ => /\d{0,1}/: one more number;
5.) /\d{3}/ : 3 numbers</p></li></ol><h2 id=10-greedy-mode-and-non-greedy-mode>10. Greedy mode and non-greedy mode:</h2><ol start=10><li><ol><li>Greedy mode: Regular expressions will match as many characters as possible.</li></ol></li></ol><p>For example, the following regular expression matches a string of 3 to 6 digits, and by default will match as many as possible.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'b12345678A5879e123'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/\d{3,6}/g</span>)
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["123456", "5879", "123"]
</span></span></span></code></pre></div><ol start=10><li><ol start=2><li>Non-greedy mode: Add a question mark after the quantifier to match as few strings as possible.</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'b12345678A5879e123'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/\d{3,6}?/g</span>)
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["123", "456", "587", "123"]
</span></span></span></code></pre></div><h2 id=11-grouping>11. Grouping:</h2><ol start=11><li><ol><li>The brackets “()” turn the string into a group, allowing the quantifier to act on the group.</li></ol></li></ol><p>Sample code:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'abcabcabccc'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/abc{3}/g</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["abccc"]
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>'abcabcabccc'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/(abc){3}/g</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["abcabcabc"]
</span></span></span></code></pre></div><ol start=11><li><ol start=2><li>Logical OR: The vertical bar “|” acts on grouping and can represent selecting one of multiple branches.</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'whatwhaowho'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/wh(at|o)/g</span>)<span style=color:#960050;background-color:#1e0010>；</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["what", "who"]
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>'whatwhaowhowhy'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/wh(at|o|y)/g</span>)
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["what", "who", "why"]
</span></span></span></code></pre></div><ol start=11><li><ol start=3><li>Capture grouping, back reference</li></ol></li></ol><p>If you want to format the following date: <code>2016-01-20</code> => <code>01/20/2016</code>; you can write it like this</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'2016-01-20'</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(\d{4})-(\d{2})-(\d{2})/g</span>, <span style=color:#e6db74>"$2/$3/$1"</span>)
</span></span><span style=display:flex><span> <span style=color:#75715e>// "01/20/2016"
</span></span></span></code></pre></div><p><code>$</code> plus a number, the number corresponds to the sequence number of the group, the content of the first group is captured with <code>$1</code>, the content of the second group is captured with <code>$2</code>, and so on.</p><ol start=11><li><ol start=4><li>Ignore the group: Adding <code>?:</code> in the group means ignoring the group and capturing the contents of the group.</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'2016-01-20'</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(?:\d{4})-(\d{2})-(\d{2})/g</span>, <span style=color:#e6db74>"$1/$2"</span>)
</span></span><span style=display:flex><span> <span style=color:#75715e>// "01/20"
</span></span></span></code></pre></div><h2 id=12-assertion>12. Assertion:</h2><ol start=12><li><ol><li>Regular expressions are parsed from the beginning of the text to the end of the text. The direction of the end of the text is called “front”, and vice versa is called “back”.</li></ol></li><li><ol start=2><li>Look-ahead and look-ahead: When a regular expression matches a rule, it checks forward to see if it conforms to the assertion, which is called “look-ahead”. Checking backward to see if an assertion is met is called “look-behind”. JavaScript does not support lookbehinds.</li></ol></li><li><ol start=3><li>Positive/positive lookahead: forward conformity assertion. exp(?=assert)</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'5a68cz7'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/\d(?=[a-z])/g</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>//["5", "8"]
</span></span></span></code></pre></div><ol start=12><li><ol start=4><li>Negative/negative lookahead: Forward does not conform to the assertion. exp(?!assert)</li></ol></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>'5a68cz7'</span>.<span style=color:#a6e22e>match</span>(<span style=color:#e6db74>/\d(?=[a-z])/g</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["6", "7"]
</span></span></span></code></pre></div><h3 id=13regexp-object-properties>13.RegExp object properties</h3><ol start=13><li><p>1.<code>global</code>: Whether to search in full text (read-only attribute);</p></li><li><p>2.<code>ignoreCase</code>: whether it is case sensitive (read-only attribute);</p></li><li><p>3.<code>multline</code>: whether it is multi-line (read-only attribute);</p></li><li><p>4.<code>source</code>: regular expression text content; (read-only attribute);</p></li><li><p>5.<code>lastIndex</code>: The position next to the last character of the current expression matching content.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg1</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d{3,5}-\w{6}/</span>, <span style=color:#a6e22e>reg2</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d{3,5}-\w{6}/gim</span>;
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>global</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// false
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>ignoreCase</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// false
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>multiline</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// false
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>global</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>multiline</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>ignoreCase</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>source</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// "\d{3,5}-\w{6}"
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>source</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// "\d{3,5}-\w{6}"
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>source</span> <span style=color:#f92672>==</span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>source</span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span></code></pre></div><h2 id=14regexp-methods-test-exec>14.RegExp methods: test(), exec()</h2><ol start=14><li>1.<code>RegExp.test(string)</code>: Test whether a string can match the regular expression. Parameters are strings; return value is Boolean.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg1</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d/</span>, <span style=color:#a6e22e>reg2</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d/g</span>;
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg1</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>); <span style=color:#75715e>// Note that it becomes `false` here because the `lastIndex` property changes every time it is executed. Therefore, do not use the global matching mode when using RegExp with the `test` method.
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// false
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>while</span>(<span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>test</span>(<span style=color:#e6db74>'a12ab'</span>)){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#e6db74>'reg2.lastIndex:'</span> <span style=color:#f92672>+</span><span style=color:#a6e22e>reg2</span>.<span style=color:#a6e22e>lastIndex</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#75715e>// reg2.lastIndex:2
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// reg2.lastIndex:3
</span></span></span></code></pre></div><ol start=14><li>2.<code>RegExp.exec(string)</code>: Returns an array of matching information.</li></ol><p>Returns <code>null</code> if there is no matching text, otherwise returns a result array. Non-global matching mode, <code>lastIndex</code> is 0 and will not change. In global mode, <code>lastIndex</code> will change every time it is executed.</p><p>var reg1 = /\d+(\w)\d/, reg2 = /\d+(\w)\d/g, str=“1a2ce58g79ht”;
var result = reg1.exec(str);
console.log(reg1.lastIndex + ‘\t’ + result.index+ ‘\t’ + result.toString());
»> 0 0 1a2,a
while(result=reg2.exec(str)){
console.log(‘reg2.lastIndex:’+ reg2.lastIndex + ‘\t’ + ‘result.index:’+ result.index+ ‘\t’ + result.toString());
}
»>reg2.lastIndex:3 result.index:0 1a2,a
»>reg2.lastIndex:9 result.index:5 58g7,g</p><h2 id=15-some-regular-operations-search-replace-split-etc-methods-of-string-match-search-replace-split>15. Some regular operations (search, replace, split, etc.) methods of String: match(), search(), replace(), split();</h2><ol start=15><li><ol><li><code>string.match(RegExp)</code>:</li></ol></li></ol><ol><li><p>In non-global mode, return the first matching result and its <code>index</code> and the reference to the original string (see sample code);</p></li><li><p>In global mode, return all arrays whose matching results are elements;</p></li><li><p>Return <code>null</code> if the match fails.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg1</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d{4}-\d{2}-\d{2}/</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>reg2</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\d{4}-\d{2}-\d{2}/g</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>str</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>matchArray1</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>str</span>.<span style=color:#a6e22e>match</span>(<span style=color:#a6e22e>reg1</span>);
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>matchArray2</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>str</span>.<span style=color:#a6e22e>match</span>(<span style=color:#a6e22e>reg2</span>);
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>matchArray1</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["2016-10-01", index: 0, input: "2016-10-01 2017-10-01 20181001"]
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>matchArray2</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["2016-10-01", "2017-10-01"]
</span></span></span></code></pre></div><ol start=15><li>2.<code>string.search(RegExp)</code>:</li></ol><p>The parameter can be a <code>substring</code> or a <code>regular expression</code>. This method is used to find the first successful match of a substring or regular expression in the string. If it is unsuccessful, it returns <code>-1</code>.</p><ol start=15><li>3.<code>string.replace(RegExp, replacement)</code>：</li></ol><ol><li>This method is used to perform regular expression replacement, replacing the text that <code>RegExp</code> can match with the second parameter <code>replacement</code>. By default, only one match is performed. If set to global mode, all matching text will be replaced.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/\d{4}-\d{2}-\d{2}/</span>, <span style=color:#e6db74>"Date"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "Date 2017-10-01 20181001"
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/\d{4}-\d{2}-\d{2}/g</span>, <span style=color:#e6db74>"Date"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "Date Date 20181001"
</span></span></span></code></pre></div><ol start=2><li>If the second parameter string refers to groups, you can use <code>$1</code> to represent the first group, <code>$2</code> to represent the second group, and so on.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(\d{4})-(\d{2})-(\d{2})/</span>, <span style=color:#e6db74>"$2/$3/$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "10/01/2016 2017-10-01 20181001"
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(\d{4})-(\d{2})-(\d{2})/g</span>, <span style=color:#e6db74>"$2/$3/$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "10/01/2016 10/01/2017 20181001"
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"2016-10-01 2017-10-01 20181001"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(\d{4})-?(\d{2})-?(\d{2})/g</span>, <span style=color:#e6db74>"$2/$3/$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "10/01/2016 10/01/2017 10/01/2018"
</span></span></span></code></pre></div><ol start=3><li>If you want to represent the <code>$</code> character in the second parameter, you must use <code>$$</code> to escape.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>"the price is 12.99"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/([\d+\.\d{0,2}|\d+])/</span>, <span style=color:#e6db74>"$$$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "the price is $12.99"
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"the price is 12"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/([\d+\.\d{0,2}|\d+])/</span>, <span style=color:#e6db74>"$$$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#e6db74>"the price is $12"</span>
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"the price is 12.99"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/(\d+\.\d{0,2})/</span>, <span style=color:#e6db74>"￥$1"</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// "the price is ￥12.99"
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#e6db74>"the price is 12"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/([\d+\.\d{0,2}|\d+])/</span>, <span style=color:#e6db74>"$"</span>);
</span></span><span style=display:flex><span> <span style=color:#e6db74>"the price is $12"</span>
</span></span></code></pre></div><ol start=4><li>The second parameter can also be a function.</li></ol><p>The example below shows how to convert words starting with t to uppercase.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>"one two three"</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/\bt[a-zA-Z]+\b/g</span>, <span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>m</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>m</span>.<span style=color:#a6e22e>toUpperCase</span>();
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// "one TWO THREE"
</span></span></span></code></pre></div><ol start=15><li><ol start=4><li><code>string.split(RegExp)</code>:</li></ol></li></ol><p>This method uses a regular expression to split the string. Whether the regular expression uses a global pattern has no effect on the result.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#e6db74>"one two three"</span>.<span style=color:#a6e22e>split</span>(<span style=color:#e6db74>/s+/</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// ["one two three"]
</span></span></span></code></pre></div></div><footer class=post-footer><div class=post-tags><a href=/en/tags/regexp/>RegExp</a></div><nav class=post-nav><a class=prev href=/fix-inline-bug.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Inline Bug</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/cdn.html><span class="next-text nav-default">Cdn</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>