• 第十八节 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
  • 相关阅读:
    keyCode的使用
    写自已的类库需要的核心代码
    50个必备的实用jQuery代码段
    javascript基础
    给js原生Array增加each方法
    jquery中一些容易让人困惑的东西总结[转载]
    ajax编程
    oracle的正则表达式 [转载]
    eclipse 插件大全
    SlickGrid Options
  • 原文地址:https://www.cnblogs.com/han-bky/p/10433498.html
Copyright © 2020-2023  润新知