_JavaScript简单入门——正则表达式
好久没发博客了，主要是懒得写，写博客是不是一种负担，而是一种改用的时候就拿来用的工具
而这一次写的原因是，这几天学了JavaScript的正则表达式的使用，
信息量有点大，所以昨天差不多用了半天的时间进行内容回顾，翘代码实际操作加深印象
一天回顾下来，原本各种弄混，概念不清晰，现在应该是有自信用好正则表达式的，挺有用的
具体就不多加解释了，我觉得下面源码里面的一大坨注释应该看起来还是浅显易懂的
用console.log()显示控制台输出，类似python的print()和C的printf()，该行后面的注释里面有控制台输出结果
Part 1 正则表达式的创建与检查
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正则表达式的创建与检查</title> 6 </head> 7 <body> 8 <script> 9 /* 正则表达式用来定义一些字符串的规则 10 计算机可以根据正则表达式，来检查一个字符串是否符合你想要的规则 11 也可以获取将字符串中符合规则的内容提取出来 */ 12 13 // 创建正则表达式的对象 14 var reg1 = new RegExp("a","i"); // 语法：var 变量 = new RegExp("正则表达式","匹配模式"); 15 // 检查一个字符串中是否含有字符串"a",第二个参数"i"表示检查可以忽略大小写 16 // 第二个参数也可以为"g"表示全局检查，就是有些只是检查到第一处符合条件就会停下 17 // 使用全局检查后，可以对字符串全局检查，从头检查到尾 18 console.log("csl_1 = "+typeof(reg1)); // csl_1 = object 使用typeof检查正则对象，会返回object 19 20 // 正则表达式的方法：test() 21 // 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，符合为true，否则为false 22 23 var str1 = "abcdefg"; // 被检查的字符串 24 var result1 = reg1.test(str1); // 检查是否符合正则表达式 25 console.log(result1); // true 26 str1 = "bcd"; // 修改字符串str1 27 console.log(reg1.test(str1)); // false 28 str1 = "Ace"; 29 console.log(reg1.test(str1)); // true,忽略大小写（上文提到的"i"） 30 31 // 使用字面量来创建正则表达式，语法：var 变量 = /正则表达式/匹配模式 32 // 使用字面量的方式创建更加简单，而使用构造函数创建更加灵活，上文中用的就是构造函数创建 33 var reg2 = /a/i; // a为检查字符串中是否含有"a",i为忽略大小写 34 console.log(typeof reg2); // object 35 console.log(reg2.test("abc")); // true 36 37 // 创建一个正则表达式检查一个字符串中是否含有字母a或b或c 38 var reg3 = /a|b|c/; 39 console.log(reg3.test("abc")); // true 40 console.log(reg3.test("arduino")); // true 41 console.log(reg3.test("boy")); // true 42 console.log(reg3.test("dog")); // false 43 44 // 上面的reg3写的有点难看，用比较好看的写法 45 // []里的内容也是或"|"的关系，如：[ab] == a|b; 46 // [a-z]表示任意小写字母;[A-Z]表示任意大写字母;[A-z]表示任意字母;[0-9]表示任意数字 47 reg3 = /[a-c]/; // 上文中reg3的另一种写法，用来检查是否含有 a或b或c 48 console.log(reg3.test("evening")); // false 49 console.log(reg3.test("affternoon")); // true 50 // 一些尝试 51 var reg4 = /abc/; // 这个和上面的reg3不一样， 52 // 这个不是检查有a或b或c，而是检查是否含有字符串"abc" 53 console.log(reg4.test("cba")); // false 54 console.log(reg4.test("abcd")); // true 55 var reg5 = /a[bcd]e/; // 这个检查的字符串规则为：a开头，e结尾，中间只有一位字母，b或c或d 56 console.log(reg5.test("ace")); // true 57 console.log(reg5.test("abc")); // false 58 console.log(reg5.test("abcde")); // false 59 60 // [^]除了，[^a]除了a，含有其他字符为true，否则为false，[^ab]除了a和b以外，含有其他字符为true，否则为false 61 var reg6 = /[^ab]/; 62 console.log(reg6.test("ababab")); // false 63 console.log(reg6.test("abc")); // true 64 console.log(reg6.test("alive")); // true 65 console.log(reg6.test("cute")); // true 66 var reg7 = /[^0-9]/; // 检查字符串中除了数字外是否含有其他字符，有为true，无为false 67 console.log(reg7.test("1433223")); // false 68 console.log(reg7.test("aa13a3a2a3a3")); // true 69 console.log(reg7.test("morning")); // true 70 </script> 71 </body> 72 </html>
Part 2 作为参数时的正则表达式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>作为参数的正则表达式</title> 6 </head> 7 <body> 8 <script> 9 // 正常表达式除了可以用来检查字符串规则，还可以用来作为参数传递到某些方法内 10 // 如str.split(),str是字符串，之前常用的是str.split(",")，通过逗号将字符串拆分成数组 11 // 这里另外一种写法为str.split(/,/);这个方法不用指定全局匹配，也会全都拆分 12 var str2 = "aa13a3a2a3a3"; 13 var array1 = str2.split(/a/); // 通过字母a将字符串拆分成数组 14 console.log(array1); // (7) ["", "", "13", "3", "2", "3", "3"] 15 var str3 = "http://1www2.bilibili3.com"; 16 var array2 = str3.split(/[0-9]/); 17 console.log(array2); // (4) ["http://", "www", ".bilibili", ".com"] 18 19 // 除了split方法外，再介绍下search()，可以搜索字符串中是否含有指定内容 20 // 如果搜索到，则返回第一次出现的索引，否则返回-1，同样也可以接受一个正则表达式作为参数 21 // search()只会查找第一个，计算设置全局也没用 22 var str4 = "hello world,good morninig"; 23 console.log(str4.search(/[ ,]/)); // 空格和逗号，返回5 24 25 // match()会将匹配到的内容封装到一个数组中返回 26 // 默认情况下match()只会找到第一个符合要求的内容，找到后就会停止检索 27 // 这时我们可以给正则表达式设置全局匹配模式，这样就会匹配到所有的内容 28 // 可以尾一个正则表达式设置多个匹配模式，顺序怎样都无所谓，如下文正则表达式后面第二个/后面 29 // 无论是ig或是gi，效果都一样，都是全局加上忽略大小写 30 var reg8 = /[a-z]/; 31 var str5 = "1a2b3c4d5e6f7"; 32 console.log(str5.match(reg8)); // ["a", index: 1, input: "1a2b3c4d5e6f7", groups: undefined] 33 // 上面只检查到第一个符合正则表达式的a，就停止检索，若要检查全部，则进行如下操作 34 reg8 = /[a-z]/gi; 35 str5 = "1a2b3c4d5e6f7G8H9"; // 现在还加入了大写字母 36 console.log(str5.match(reg8)); // (8) ["a", "b", "c", "d", "e", "f", "G", "H"] 37 // 0: "a" // 1: "b" // 2: "c" // 3: "d" 38 // 4: "e" // 5: "f" // 6: "G" // 7: "H" // length: 8 39 40 // replace()可以将字符串中指定内容替换为新的内容 41 // 可以将字符串中指定的内容替换为新的内容 42 // replace()参数：参数1：被替换的内容，可接受正则表达式；参数2：新的内容 43 // 可以给正则表达式设置全局匹配模式 44 var str6 = "1a2b3c4d5e6f7"; 45 var reg9 = /[A-z]/; 46 console.log(str6.replace(reg9,"-@w@-")); // 1-@w@-2b3c4d5e6f7 47 reg9 = /[A-z]/g; // 设定全局检查 48 console.log(str6.replace(reg9,"-@w@-")); // 1-@w@-2-@w@-3-@w@-4-@w@-5-@w@-6-@w@-7 49 </script> 50 </body> 51 </html>
Part 3 正则表达式的量词与开头结尾设置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正则表达式的量词与开头结尾设置</title> 6 </head> 7 <body> 8 <script> 9 // 通过量词，正则表达式可以设置一个内容出现的次数 10 var reg10 = /a{3}/; // 表示a连续出现3次，与/aaa/意思相同 11 var str7 = "aaaaaaah"; 12 console.log(reg10.test(str7)); // true 13 str7 = "abaabb"; 14 console.log(reg10.test(str7)); // false 15 16 // {m,n}正好连续出现m到n次 17 // 同理{m,}表示连续出现m次以上；{,n}表示连续出现n次以下 18 var reg11 = /a{2,3}/; // 表示a连续出现2次或3次 19 var str8 = "abcd"; 20 console.log(reg11.test(str8)); // false 21 str8 = "aaabcd"; 22 console.log(reg11.test(str8)); // true 23 str8 = "aabcd"; 24 console.log(reg11.test(str8)); // true 25 reg11 = /a{2,}/; // 连续出现2次或2次以上 26 console.log(reg11.test(str8)); // true 27 reg11 = /a{,1}/; // 连续出现1次即1次以下，即0或1次 28 console.log(reg11.test(str8)); // false 29 // 还有其他写法，如/a+/; 表示连续出现1次或1次以上，即/a{1,}/; 30 // 如/a*/; 表示0个或者多个，即/{0,}/; 31 // 如/a?/; 表示0个或者1个，即/{0,1}/; 32 33 // 检查字符串的开头或结尾 34 // ^ 表示开头，如 reg = /^a/; 匹配开头的a 35 // $ 表示结尾，如 reg = /a$/; 匹配结尾的a 36 var reg12 = /^a$/; 37 console.log(reg12.test("a")); // true 以a开头，以a结尾 38 console.log(reg12.test("aaa")); // false 虽然也是以a开头，以a结尾，但是就是不行，索引地址必须相同 39 console.log(reg12.test("abcba")); // false 40 reg12 = /^a|a$/; // 以a开头或者以a结尾 41 console.log(reg12.test("aaa")); // true 42 console.log(reg12.test("abcba")); // true 43 </script> 44 </body> 45 </html>
Part 4 正则表达式的转义符与元字符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正则表达式的转义符与元字符</title> 6 </head> 7 <body> 8 <script> 9 // 检查一个字符串中是否含有. 10 // .表示任意字符 11 var reg13 = /./; 12 console.log(reg13.test("www.baidu.com")); // true 13 console.log(reg13.test("1433223")); // true 14 // 从上面实验中，发现不能直接用/./检查字符串中是否含有. 15 // 所以，这个时候我们可以用转义符\ 16 // 用\.来表示. 17 reg13 = /\./; 18 console.log(reg13.test("www.bilibili.com")); // true 19 console.log(reg13.test("1433223")); // false 20 // 关于\的表示,可以用\\表示\ 21 // 关于\\的表示，可以用\\\\表示\\ 22 reg13 = /\\/; 23 str9 = "D:\\Python\\python_study"; 24 console.log(reg13.test(str9)); // true 25 26 // 正则表达式中的元字符 27 // \w元字符用于查找单词字符; \W与\w相反，查找非单词字符 28 // \d元字符用于查找数字[0-9]; \D与\d相反，查找非数字 29 // \s元字符用于查找空格; \S与\s相反，查找非空格 30 // \b元字符用于查找单词边界; \B与\b相反，查找非单词边界 31 var reg14 = /\w/; // 字符串中含有字母或数字或下滑线时为true，否则为false 32 console.log(reg14.test("will")); // true 33 console.log(reg14.test("!@#$%&")); // false 34 var reg15 = /\d/; // 字符串中含有数字时为true，否则为false 35 console.log(reg15.test("abcd")); // false 36 console.log(reg15.test("13a2a3a3")); // true 37 var reg16 = /\s/; // 字符串中含有空格时为true，否则为false 38 console.log(reg16.test("hello world")); // true 39 console.log(reg16.test("helloworld")); // false 40 var reg17 = /\bapple\b/; // 字符串中含有规定的单词时（apple）为true，否则为false 41 console.log(reg17.test("I have an apple")); // true 42 console.log(reg17.test("I have a pen")); // false 43 console.log(reg17.test("Ah applepen")); // false，虽然含有apple，但是里面是applepen不是apple 44 </script> 45 </body> 46 </html>
最后想说
我学JS的链接：https://www.bilibili.com/video/BV1YW411T7GX?p=85
想更深刻地理解的话前往：https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
突然穿插一期JavaScript的介绍确实有点乱了章程，上一期还在写CSS3来着
本来想继续写CSS3的，但是当我的CSS定位写到一半时，发现写的东西有点浅的过头了
CSS3定位学的时候印象还是挺深刻的，但是隔了好久没用，就忘的有点多，不是很适合写随笔
现在CSS定位的随笔还保存在草稿箱中，等后来某一天有空回过头去重温CSS的使用，再去继续写随笔
所以本篇随笔可能对JS零基础的看起来会有点难受，有别的语言的编程基础的应该多少是能看的懂的
