第十八节 JS中的正则表达式

it2022-05-09  30

复习字符串操作:

  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> 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位,可有可无),则有:(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> View Code

转载于:https://www.cnblogs.com/han-bky/p/10433498.html


最新回复(0)