第十八节 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、dd和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>
View Code

字符串:[]在正则表达式中被称作元字符,具有以下功能

  任意字符:

    [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>
View Code

  转义字符:

    . (点:通配符,表示任意字符):尽量少用或不用,因为容易出错

    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位,可有可无),则有:(0d{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>
View Code
原文地址:https://www.cnblogs.com/han-bky/p/10433498.html