1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>14正则表达式</title>
9 </head>
10 <body>
11
12 <script>
13 /* 说明:
14 (1) 元字符(表示符号: 规定的字符)、原子表(表示符号: [])，是正则表达式中的最小元素，只代表单一(一个)字符。
15 (2) 原子组(表示符号: ())，原子组与原子表的差别在于原子组一次匹配多个字符，而原子表则是匹配任意一个字符。
16 (3) 重复匹配: 因为正则最小单位是元字符，而我们很少只匹配一个元字符如 a、b 所以基本上重复匹配在每条正则语句中都是必用到的内容。
17 (4) 其它: [] 任意一个，() 整体，/ab/ 连续字符。
18 */
19
20 /*14.1 选择符的使用*/
21 // | 这个符号代表选择修释符，也就是 | 左右两侧有一个匹配到就可以。
22
23 /*14.1.1 检测电话是否是上海或北京的座机*/
24 // let tel = "010-12345678";
25 // //错误结果：只匹配 | 左右两边任一结果
26 // console.log(tel.match(/010|020\-\d{7,8}/)); // ['010', index: 0, input: '010-12345678', groups: undefined]
27 // //正确结果：所有需要放在原子组中使用
28 // console.log(tel.match(/(010|020)\-\d{7,8}/)); // (2)['010-12345678', '010', index: 0, input: '010-12345678', groups: undefined]
29
30 /*14.1.2 匹配字符是否包含baidu 或 biu*/
31 // let web = "www.baidu.com";
32 // console.log(/baidu|biu/.test(web)); //true
33
34 /*14.2 转义*/
35 //含义1: . 除换行外任何字符 含义2: .普通点
36 //含义1: d 字母d 含义2: \d 数字 0~9
37
38 // let price = 12.23;
39 // console.log("\d+\.\d+"); // d+.d+
40 // console.log("\\d+\\.\\d+"); // \d+\.\d+
41 // let reg = new RegExp("\\d+\\.\\d+");
42 // console.log(reg.test(price)); // true
43 //
44 // let url = "https://www.baidu.com";
45 // console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url)); // true
46
47 /*14.3 字符边界约束*/
48 /*
49 使用字符边界符用于控制匹配内容的开始与结束约定。
50 边界符 说明
51 ^ 匹配字符串的开始
52 $ 匹配字符串的结束，忽略换行符
53 */
54
55 // let name = "54321";
56 // console.log(/^\d+$/.test(name)); // true
57
58 // let name = "54321";
59 // console.log(name.match(/^\d+$/)); // ['54321', index: 0, input: '54321', groups: undefined]
60
61 // 以字母开头，数字结尾，并且整个长度为6-12的正则表达式
62 // /^[a-z]\d{5,11}$/
63
64 /*14.4 元字符*/
65 // 元字符是正则表达式中的最小元素，只代表单一(一个)字符
66 /*
67 元字符 说明 示例
68 \d 匹配任意一个数字 [0-9]
69 \D 与除了数字以外的任何一个字符匹配 [^0-9]
70 \w 与任意一个英文字母,数字或下划线匹配 [a-zA-Z_]
71 \W 除了字母,数字或下划线外与任何字符匹配 [^a-za-z_]
72 \s 任意一个空白字符匹配，如空格，制表符\t，换行符\n [\n\f\r\t\v]
73 \S 除了空白符外任意一个字符匹配 [^\n\f\r\t\v]
74 . 匹配除换行符外的任意字符
75 */
76
77 /*14.4.1 \d */
78 // let web = "www.baidu.com 2022";
79 // console.log(web.match(/\d/)); // ['2', index: 14, input: 'www.baidu.com 2022', groups: undefined]
80 // console.log(web.match(/\d/g)); // (4)['2', '0', '2', '2']
81 // console.log(web.match(/\d+/)); // ['2022', index: 14, input: 'www.baidu.com 2022', groups: undefined]
82
83 // let name = "张三:010-99999999,李四:020-88888888";
84 // console.log(name.match(/\d{3}-\d{7,8}/g)); // (2)['010-99999999', '020-88888888']
85
86 /*14.4.2 \D */
87 // let name = "www.baidu.com 2022 hello";
88 // console.log(name.match(/\D/)); // ['w', index: 0, input: 'www.baidu.com 2022 hello', groups: undefined]
89 // console.log(name.match(/\D+/)); // ['www.baidu.com ', index: 0, input: 'www.baidu.com 2022 hello', groups: undefined]
90 // console.log(name.match(/\D+/g)); // (2)['www.baidu.com ', ' hello']
91
92 /*14.4.3 \w */
93 // let web = "baidu.com2022-@@2023";
94 // console.log(web.match(/\w/)); // ['b', index: 0, input: 'baidu.com2022-@@2023', groups: undefined]
95 // console.log(web.match(/\w+/)); // ['baidu', index: 0, input: 'baidu.com2022-@@2023', groups: undefined]
96 // console.log(web.match(/\w+/g)); // (3)['baidu', 'com2022', '2023']
97
98 /*14.4.4 \W */
99 // console.log("baidu.com@".match(/\W+/g)); // ['.', '@']
100
101 /*14.4.5 \s */
102 // console.log(/\s/.test("web\n")); // true
103
104 /*14.4.6 \S */
105 // console.log(/\S/.test("web\n")); // true
106
107 /*14.4.7 . */
108 // let web = "www.badiu.com @ 2022";
109 // console.log(web.match(/./)); // ['w', index: 0, input: 'www.badiu.com @ 2022', groups: undefined]
110 // console.log(web.match(/.+/)); // ['www.badiu.com @ 2022', index: 0, input: 'www.badiu.com @ 2022', groups: undefined]
111 // console.log(web.match(/.+/g)); // ['www.badiu.com @ 2022']
112
113 // let name = `
114 // baidu.com
115 // sina.com
116 // `;
117 // console.log(name.match(/.+/sg)); // ['\n baidu.com\n sina.com\n ']
118
119 /*14.5 匹配所有字符 */
120 // 可以使用 [\s\S] 或 [\d\D] 来匹配所有字符
121 // let web = "baidu.com_@2022 123 #% bv"
122 // console.log(web.match(/[\s\S]+/)); // ['baidu.com_@2022 123 #% bv', index: 0, input: 'baidu.com_@2022 123 #% bv', groups: undefined]
123
124 // let web = "bai\ndu.com_@2022 12\n3 #% bv"
125 // console.log(web.match(/[\s\S]+/g)); // ['bai\ndu.com_@2022 12\n3 #% bv']
126
127 /*14.6 模式修正符*/
128 /*
129 正则表达式在执行时会按他们的默认执行方式进行，但有时候默认的处理方式总不能满足我们的需求，所以可以使用模式修正符更改默认方式。
130 修饰符 说明
131 i 不区分大小写字母的匹配
132 g 全局搜索所有匹配内容
133 m 视为多行
134 s 视为单行忽略换行符，使用 . 可以匹配所有字符
135 y 从 regexp.lastIndex 开始匹配
136 u 正确处理四个字符的 UTF-16 编码
137 */
138
139 /*14.6.1 i与g模式修正符*/
140 // let name = "BaiBaiDu";
141 // console.log(name.match(/b/)); // null
142 // console.log(name.match(/b/i)); // ['B', index: 0, input: 'BaiBaiDu', groups: undefined]
143 // console.log(name.match(/b/ig)); // (2)['B', 'B']
144
145 /*14.6.2 lastIndex属性*/
146 // 控制正则表达式开始搜索的位置
147 // let name = "baidu";
148 // console.log(name.match(/\w/g)); // (5)['b', 'a', 'i', 'd', 'u']
149 // let reg = /\w/g;
150 // console.log(reg.lastIndex); // 0
151 // console.log(reg.exec(name)); // ['b', index: 0, input: 'baidu', groups: undefined]
152 // console.log(reg.lastIndex); // 1
153 // console.log(reg.exec(name)); // ['a', index: 1, input: 'baidu', groups: undefined]
154
155 /*14.7 原子表基本使用*/
156 /*
157 在一组字符中匹配某个元字符，在正则表达式中通过元字符表来完成，就是放到[] (方括号)中。
158
159 原子表 说明
160 [] 只匹配其中的一个原子
161 [^] 只匹配"除了"其中字符的任意一个原子
162 [0-9] 匹配 0-9 任何一个数字
163 [a-z] 匹配小写 a-z 任何一个字母
164 [A-Z] 匹配大写 A-Z 任何一个字母
165 */
166
167 /*14.7.1 [] */
168 // let name = "BaiduBaidu";
169 // // 整个匹配
170 // console.log(name.match(/ai/)); // ['ai', index: 1, input: 'BaiduBaidu', groups: undefined]
171 // // []只匹配其中的一个
172 // console.log(name.match(/[ai]/)); // ['a', index: 1, input: 'BaiduBaidu', groups: undefined]
173 // console.log(name.match(/[ai]+/)); // ['ai', index: 1, input: 'BaiduBaidu', groups: undefined]
174 // console.log(name.match(/[ai]+/g)); // (2)['ai', 'ai']
175
176 // let web1 = "2022@2023";
177 // console.log(web1.match(/[0-9]/)); // ['2', index: 0, input: '2022@2023', groups: undefined]
178 // console.log(web1.match(/[0-9]+/)); // ['2022', index: 0, input: '2022@2023', groups: undefined]
179 // console.log(web1.match(/[0-9]+/g)); // (2)['2022', '2023']
180
181 // let tel = "2022-09-22";
182 // let reg = /^\d{4}([-\/])\d{2}\1\d{2}$/;
183 // console.log(tel.match(reg)); // (2)['2022-09-22', '-', index: 0, input: '2022-09-22', groups: undefined]
184
185 /*14.7.2 区间匹配*/
186 // // 数字区间
187 // let name = "2022";
188 // console.log(name.match(/[0-9]+/)); // ['2022', index: 0, input: '2022', groups: undefined]
189 // // 字母匹配
190 // let web = "baidu";
191 // console.log(web.match(/[a-z]+/)); // ['baidu', index: 0, input: 'baidu', groups: undefined]
192
193 /*14.7.3 排除匹配*/
194 // let name = "baidu";
195 // console.log(name.match(/[^i]/)); // ['b', index: 0, input: 'baidu', groups: undefined]
196 // console.log(name.match(/[^i]+/)); // ['ba', index: 0, input: 'baidu', groups: undefined]
197 // console.log(name.match(/[^i]+/g)); // (2)['ba', 'du']
198
199 // 匹配中文
200 // let name = "张三:010-99999999,李四:010-88888888";
201 // console.log(name.match(/[^:\d-,]+/g)); // (2)['张三', '李四']
202
203 /*14.7.4 原子表字符不解析*/
204 // let name = "(baidu).+";
205 // console.log(name.match(/[()]/g)); // (2)['(', ')']
206 // console.log(name.match(/[.+]+/)); // ['.+', index: 7, input: '(baidu).+', groups: undefined]
207
208 /*14.7.5 使用原子表匹配所有内容*/
209 // let name = `
210 // baidu
211 // sina
212 // `;
213 // console.log(name.match(/.+/g)); // (3)[' baidu', ' sina', ' ']
214 // // 所有内容 [\s\S] 等价于 [\d\D]
215 // console.log(name.match(/[\s\S]+/)); // ['\n baidu\n sina\n ', index: 0, input: '\n baidu\n sina\n ', groups: undefined]
216 // console.log(name.match(/[\d\D]+/)); // ['\n baidu\n sina\n ', index: 0, input: '\n baidu\n sina\n ', groups: undefined]
217
218 /*14.8 原子组*/
219 /*
220 (1) 如果一次要匹配多个字符，可以通过原子组完成。
221 (2) 原子组与原子表的差别在于原子组一次匹配多个字符，而原子表则是匹配任意一个字符。
222 (3) 原子组用 () 包裹。
223 (4) 基本使用
224 没有添加 g 模式修正符时只匹配到第一个，匹配到的信息包含以下数据。
225 变量 说明
226 0 匹配到的完整内容
227 1,2.... 匹配到的原子组
228 index 原字符串中的位置
229 input 原字符串
230 groups 命名分组
231 在match中使用原子组匹配，会将每个组数据返回到结果中。
232 */
233
234 /*14.8.1 原子组及原子组别名示例*/
235 // let name = `
236 // <h1>
237 // baidu
238 // </h1>
239 // <h2>sina</h2>
240 // `;
241 // let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi;
242 // console.log(name.match(reg)[1]); // <h2>sina</h2>
243 // console.log(name.match(reg)); // (2)['<h1>\n baidu\n </h1>', '<h2>sina</h2>']
244 //
245 // // 去除全局匹配g，原子组别名
246 // let reg1 = /<(?<con>h[1-6])>[\s\S]*<\/\1>/i;
247 // console.log(name.match(reg1));
248 // /*
249 // 0: "<h1>\n baidu\n </h1>"
250 // 1: "h1"
251 // groups: {con: 'h1'}
252 // index: 5
253 // input: "\n <h1>\n baidu\n </h1>\n <h2>sina</h2>\n "
254 // length: 2
255 // */
256 // console.log(name.match(reg1).groups); // {con: 'h1'}
257
258 /*14.8.2 原子组引用完成替换操作*/
259 // let name = `
260 // <h1>
261 // baidu
262 // </h1>
263 // <h2>sina</h2>
264 // `;
265 // let reg = /<(h[1-6])>([\s\S]*)<\/\1>/gi;
266 // console.log(name.replace(reg,`<p>$2</p>`));
267 // /*
268 // <p>
269 // baidu
270 // </p>
271 // <p>sina</p>
272 // */
273 //
274 // // 通过原子组别名的方式替换
275 // let reg1 = /<(h[1-6])>(?<con>[\s\S]*)<\/\1>/gi;
276 // console.log(name.replace(reg1,`<p>$<con></p>`));
277 // /*
278 // <p>
279 // baidu
280 // </p>
281 // <p>sina</p>
282 // */
283
284 /*14.9 重复匹配*/
285 /*
286 如果要重复匹配一些内容时我们要使用重复匹配修饰符，包括以下几种。
287 符号 说明
288 * 重复零次或更多次
289 + 重复一次或更多次
290 ? 重复零次或一次
291 {n} 重复 n 次
292 {n,} 重复 n 次或更多次
293 {n,m} 重复 n 到 m 次
294 因为正则最小单位是元字符，而我们很少只匹配一个元字符如 a、b 所以基本上重复匹配在每条正则语句中都是必用到的内容。
295 */
296
297 /*14.9.1 + */
298 // let name = "cdddddd";
299 // console.log(name.match(/cd/)); // ['cd', index: 0, input: 'cdddddd', groups: undefined]
300 // console.log(name.match(/cd+/)); // ['cdddddd', index: 0, input: 'cdddddd', groups: undefined]
301 //
302 // let name1 = "cadddddd";
303 // console.log(name1.match(/cd+/));// null
304
305 /*14.9.2 * */
306 // let name = "cdddddd";
307 // console.log(name.match(/cd*/)); // ['cdddddd', index: 0, input: 'cdddddd', groups: undefined]
308 //
309 // let name1 = "cadddddd";
310 // console.log(name1.match(/cd*/)); // ['c', index: 0, input: 'cadddddd', groups: undefined]
311
312 /*14.9.3 {} */
313 // let name = "cdddddd";
314 // console.log(name.match(/cd{2}/)); // ['cdd', index: 0, input: 'cdddddd', groups: undefined]
315 // console.log(name.match(/cd{2,4}/)); // ['cdddd', index: 0, input: 'cdddddd', groups: undefined]
316 // console.log(name.match(/cd{2,}/)); // ['cdddddd', index: 0, input: 'cdddddd', groups: undefined]
317
318 // 匹配电话号码
319 // let tel = "010-99999999";
320 // console.log(tel.match(/^0\d{2,3}-\d{7,8}$/)); // ['010-99999999', index: 0, input: '010-99999999', groups: undefined]
321
322 /*14.9.4 ? */
323 // let name = "cdddddd";
324 // console.log(name.match(/cd?/)) // ['cd', index: 0, input: 'cdddddd', groups: undefined]
325 //
326 // let name1 = "cadcddddd";
327 // console.log(name1.match(/cd?/)); // ['c', index: 0, input: 'cadcddddd', groups: undefined]
328
329 /*14.9.5 重复匹配对原子组影响与电话号正则*/
330 // let name = "cdddddd";
331 // console.log(name.match(/cd+/)); // ['cdddddd', index: 0, input: 'cdddddd', groups: undefined]
332 //
333 // let name1 = "cdcdcdc";
334 // console.log(name1.match(/(cd)+/)); // (2)['cdcdcd', 'cd', index: 0, input: 'cdcdcdc', groups: undefined]
335
336 /*14.10 汉字与字符属性*/
337 // let info = "baidu，2022，全球最大的，中文搜索引擎。";
338 // // 匹配字母属性
339 // console.log(info.match(/\p{L}+/gu)); // (3)['baidu', '全球最大的', '中文搜索引擎']
340 // // 匹配标点符号属性
341 // console.log(info.match(/\p{P}+/gu)); // (4)['，', '，', '，', '。']
342 // // 匹配汉字属性
343 // console.log(info.match(/\p{sc=Han}+/gu)); // (2)['全球最大的', '中文搜索引擎']
344
345 </script>
346 </body>
347 </html>
