第十八节 JS中的正则表达式
复习字符串操作：
search 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串，获取数组
1 var str = 'abcdefghijk'; 2 alert(str.search('b')); //返回1，表示b在字符串中的位置是1，不存在的字符返回-1 3 alert(str.substring(2,5)); //包含开头不包含结尾，所以返回cde 4 alert(str.substring(3)); //返回defghijk 5 alert(str.charAt(3)); //d 6 alert(str.split('')); //返回“a,b,c,d,e,f,g,h,i,j,k”
找出字符串中的所有数字
用传统字符串操作完成
1 //找出str1中的所有数字 2 var str1 = '12 sfdg-=/*sfgh85gdhj8745'; 3 var arr = []; 4 var tmp = ''; 5 6 for (var i = 0; i < str1.length; i++) { 7 if (str1.charAt(i) >= '0' && str1.charAt(i) <= 9) { 8 tmp+=str1.charAt(i); 9 } else { 10 if (tmp){ 11 arr.push(tmp); 12 tmp = ''; 13 } 14 } 15 } 16 if (tmp){ 17 arr.push(tmp); 18 tmp = ''; 19 } 20 alert(arr); //返回12,85,8745
用正则表达式完成
1 var str1 = '12 sfdg-=/*sfgh85gdhj8745'; 2 alert(str1.match(/\d+/g)); //返回12,85,8745，其中\d表示实数，g=global(全局、全部)
什么是正则表达式：
什么是正则：其实就是一种规则或模式，比如说邮箱的表示规则是："一串英文、数字和下划线组合@一串英文数字组合.一串英文"
正则表达是也是一种，强大的字符串匹配工具，是一种正常人类很难读懂的文字
RegExp对象
JS风格——new RegExp('a', 'i');
perl风格——/a/i
字符串与正则表达式：
search：字符串搜索
返回出现的位置
忽略大小写：i——ignore
判断浏览器类型
1 // var re = new RegExp('a', 'i'); //最简单的正则表达式，什么也不表示，就表示一个“a”本身，JS风格的写法，其中i=ignore表示忽略大小写 2 var re = /a/i; //另一种写法，意义与上句相同，是一种perl风格的写法，其中i=ignore表示忽略大小写 3 var str = 'abcdef'; 4 alert(str.search(re)); //返回“0”，表示a在字符串的第0位
match：获取匹配的项目
量词：表示个数，即被求项目的个数；
+：表示若干
量词变化：\d、\d\d和\d+
全局匹配：g——global
例子：找出所有数字
1 //找第一个数字出现的位置， 2 var str = 'abf ,=-1sdf65'; 3 var re = /\d/g; //其中\d表示数字，g=global，找到全部 4 alert(str.match(re)); //返回1,6,5 5 6 var re1 = /\d+/g; //所以上面不带加号，表示一个数字一个数字获取的，而现在是一串数字一串数字获取的 7 alert(str.match(re1)); //返回1,65
replace
替换所有匹配
返回替换后的字符串
1 //replace的使用 2 var str = 'alghqaerghjcvbagc'; 3 // alert(str.replace('a','0')); //返回0lghqaerghjcvbagc，可见该句只把字符串中的第一个a替换成了0，qita没变 4 5 //当我们用正则表达式时： 6 // var re = /a/; 7 // alert(str.replace(re, '0')); //返回0lghqaerghjcvbagc，与上面一样 8 9 var re = /a/g; 10 alert(str.replace(re, '0')); //返回0lghq0erghjcvb0gc，此时a全部被替换成0
例子：敏感词过滤
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>敏感词过滤</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById('txt1'); 9 var oTxt2 = document.getElementById('txt2'); 10 var oBtn = document.getElementById('btn1'); 11 12 oBtn.onclick = function () { 13 var re = /a|g|j|d|S/gi; //把agjS作为敏感词过滤掉，g表示全部，i表示忽略大小写，gi或ig不影响 14 15 oTxt2.value = oTxt1.value.replace(re, '***'); 16 }; 17 }; 18 </script> 19 </head> 20 <body> 21 <textarea id="txt1" rows="10" cols="40"></textarea><br> 22 <button id="btn1">过滤</button><br> 23 <textarea id="txt2" rows="10" cols="40"></textarea> 24 </body> 25 </html>
字符串：[]在正则表达式中被称作元字符，具有以下功能
任意字符：
[abc]：表示“或”——任选的意思，即任选一个“[]”内的字母，例子：o[usb]t——ost、obt、out
范围：
[a-z]、[0-9]（相当于\d）例子：id[0-9]——id0、id5
排除：
[^a]（除了a以外的其他字符）例子：o[^0-9]t——oat、o?t、o t（除了数字之外）、[^a-z0-9]（除了英文和数字）
组合：
[a-z0-9A-Z]
实例：采集小说，说白了就是偷小说，在原来网站上打开某个小说，然后查看打开网页的源码，然后把文字复制出来。然后再把文本里面掺杂的HTML标签过滤掉，下面是实现方法
自定义innerText方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>采集网页小说</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById('txt1'); 9 var oTxt2 = document.getElementById('txt2'); 10 var oBtn = document.getElementById('btn1'); 11 12 oBtn.onclick = function () { 13 var re = /<[^<>]+>/g; //<内部除了“<>”外的所有字符+> 14 oTxt2.value = oTxt1.value.replace(re, ''); 15 }; 16 }; 17 </script> 18 </head> 19 <body> 20 <textarea id="txt1" rows="10" cols="100"></textarea><br> 21 <button id="btn1">过滤</button><br> 22 <textarea id="txt2" rows="10" cols="100"></textarea> 23 </body> 24 </html>
转义字符：
. （点：通配符，表示任意字符）：尽量少用或不用，因为容易出错
\d（数字，即0-9——[0-9]）
\w（英文、数字和下划线——[a-z0-9_]）
\s（空白字符：空格、Tab等）
\D（除了数字——[^0-9]）
\W（除了英文、数字和下划线——[^a-z0-9_]）
\S（除了空白字符：空格、Tab等）
量词：其实就是指某个值出现的次数
常用量词：
{n,m}，至少出现n次，最多m次
{n,} 至少n次
* 任意次，相当于{0,}，不建议使用，经常出错，所以几乎用不到
? 0次或一次，即可有可无，等价于{0,1}
+ 一次或任意次，即至少一次，等价于{1,}
{n} 正好出现n次
例子：查找QQ号（目前QQ号大多是为5-11为，且第一个数字不能为0），则有：[1-9]\d{4,10}
1 <script> 2 window.onload = function () { 3 var oTxt = document.getElementById('txt1'); 4 var oBtn = document.getElementById('btn1'); 5 6 oBtn.onclick = function () { 7 var txt = oTxt.value; 8 var re = /^[1-9]\d{4,10}$/; 9 if (txt.match(re)) { 10 alert("这串数字符合QQ号的规则！"); 11 } else { 12 alert("这串数字不符合QQ号的规则！"); 13 } 14 }; 15 }; 16 </script> 17 <body> 18 <input id="txt1" type="text"/> 19 <button id="btn1">检查一串数字是否符合QQ号的规则</button> 20 </body>
再如：固定电话的号码：区号（第一位为0，共3-4为）（区号可有可无）-号码（一般为8为，首位不能为0）-分机号（一般不超过5位，可有可无），则有：(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?
常用正则例子：邮箱（一串英文、数字和下划线组合@一串英文数字组合.一串英文）校验——（\w+@[a-z0-9]+\.[a-z]——其中“\.”表示对“.”的转义，因为“.”在正则表达式中有特殊含义）
行首：字符串的开头，在正则表达式中用“^”表示行首
行尾：字符串的结尾，在正则表达式中用“$”表示行尾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>邮箱校验</title> 6 <script> 7 window.onload = function () { 8 var oTxt = document.getElementById('txt1'); 9 var oBtn = document.getElementById('btn1'); 10 11 oBtn.onclick = function () { 12 var re = /^\w+@[a-z0-9]+\.[a-z]+$/i; 13 14 if (re.test(oTxt.value)) { //正则自带测试匹配的函数 test 15 alert("是合法邮箱！"); 16 } else { 17 alert("邮箱不合法！"); 18 } 19 }; 20 }; 21 //但是test()有一个小问题：只要字符串的部分符合要求，它就返回true，所以我们要把行首和行尾封住， 22 // 如“/^\w+@[a-z0-9]+\.[a-z]+$/i”，意思就是说，只有和行首和行尾中间的东西匹配成功，才表示匹配成功 23 </script> 24 </head> 25 <body> 26 <input id="txt1" type="text"/> 27 <button id="btn1">邮箱校验</button> 28 </body> 29 </html>
