1.正则表达式基础

1.1 创建正则表达式

1.1.1 使用一个正则表达式字面量

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

1.1.2 调用RegExp对象的构造函数

const regex = new RegExp(pattern, [, flags])

1.1.3 特殊字符

 - ^ 匹配输入的开始
 - $ 匹配输入的结束
 - \* 0次或多次  {0,}
 - \+ 1次或多次  {1,}
 - ?
   - 0次或者1次 {0,1}。
   - 用于先行断言
   - 如果紧跟在任何量词 *、 +、? 或 {} 的后面,将会使量词变为非贪婪
     - 对 "123abc" 用 /\d+/ 将会返回 "123",
     - 用 /\d+?/,那么就只会匹配到 "1"。
 - . 匹配除换行符之外的任何单个字符
 - (x)  匹配 'x' 并且记住匹配项
 - (?:x)  匹配 'x' 但是不记住匹配项
 - x(?=y)  配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
 - x(?!y)  匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
 - x|y  匹配‘x’或者‘y’。
 - {n}  重复n次
 - {n, m}  匹配至少n次,最多m次
 - [xyz]   代表 x 或 y 或 z
 - [^xyz]  不是 x 或 y 或 z
 - \d  数字
 - \D  非数字
 - \s  空白字符,包括空格、制表符、换页符和换行符。
 - \S  非空白字符
 - \w  单词字符(字母、数字或者下划线)  [A-Za-z0-9_]
 - \W  非单字字符。[^A-Za-z0-9_]
 - \3  表示第三个分组
 - \b   词的边界
   - /\bm/匹配“moon”中得‘m’;
 - \B   非单词边界

1.2 使用正则表达式的方法

  • exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。
  • test 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。
  • match 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。
  • search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
  • replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
  • split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

1.2.1 正则对象的三个方法

        //①test()判断字符串中是否出现某个字符串,返回布尔值
        var re = /abc/;
        var str = '00abc66';
        console.log(re.test(str));  // true
        //②exec()查找并返回字符串中指定的某个字符串,只匹配一次
        var re = /abc/;
        var str = 'a0bc88abc00abc';
        console.log(re.exec(str));  // ["abc", index: 6, input: "a0bc88abc00abc", groups: undefined]
        //③compile()方法用于改变正则匹配的内容
        var re = /ab/;
        var str = "aabcdef";
        console.log(re.test(str));  //true
        re.compile(/bd/);
        console.log(re.test(str));  //false
        re.compile('66');
        console.log(re.test(str));  //false

1.2.2 字符串中与正则相关的方法

        //①search()方法,返回符合条件的字符串首次出现的位置(下标)
        var re = /abc/;
        var str = '00abc66';
        console.log(str.search(re));        // 2
        //②match()方法,返回查找的结果,如果查询不到返回NULL
        console.log(str.match(re));         // ["abc", index: 2, input: "00abc66", groups: undefined]
        //③replace()方法,将匹配到的内容替换成指定内容
        console.log(str.replace(re, "*"));
        //④split()方法,将字符串分割成字符串数组
        console.log(str.split(re));

1.3 正则表达式子表达式相关

1.3.1 子表达式

在正则表达式中,通过一对圆括号括起来的内容,我们就称之为“子表达式”。如:var re = /\d(\d)\d/;

1.3.2 捕获

在正则表达式中,子表达式匹配到相应的内容时,系统会自动捕获这个行为,然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。

1.3.3 反向引用

在正则表达式中,我们可以使用\n(n>0,正整数,代表系统中的缓冲区编号)来获取缓冲区中的内容,我们把这个过程就称之为“反向引用”。

    var str = "d1122jj7667h6868s9999";
    //查找AABB型的数字
    console.log(str.match(/(\d)\1(\d)\2/)); //1122
    //查找ABBA型的数字
    console.log(str.match(/(\d)(\d)\2\1/)); //7667
    //查找ABAB型的数字
    console.log(str.match(/(\d)(\d)\1\2/)); //6868
    //查找四个连续相同的数字
    console.log(str.match(/(\d)\1\1\1/));   //9999

1.4 限定符

    *:匹配前面的子表达式零次或多次,0到多
    +:匹配前面的子表达式一次或多次,1到多
    ?:匹配前面的子表达式零次或一次,0或1
    {n}:匹配确定的 n 次
    {n,}:至少匹配 n 次
    {n,m}:最少匹配 n 次且最多匹配 m 次
    var str = "aa1a22a333a6a8a";
    console.log(str.match(/a\d*/));      //a
    console.log(str.match(/a\d+/));      //a1
    console.log(str.match(/a\d?/));      //a
    console.log(str.match(/a\d{3}/));    //a333
    console.log(str.match(/a\d{2,}/));   //a22
    console.log(str.match(/a\d{1,3}/));  //a1
    console.log(str.match(/a\d{1,3}?/)); //a1

    //贪婪模式加深理解,案例如下:
    //贪婪模式下最开始的'a2就符合条件',但是它会返回'a22'
    //注意:它是在遇到一个同时符合多个次数条件的字符串时,取符合次数多字符串
    var str = "a22aa1a333a6a8a";
    console.log(str.match(/a\d{1,3}/));   //a22
    console.log(str.match(/a\d{1,3}/g));  //a22 a1 a333 a6 a8
    console.log(str.match(/a\d{1,3}?/));  //a2
    console.log(str.match(/a\d{1,3}?/g)); //a2 a1 a3 a6 a8

1.5 定位符

^ (脱字符):匹配输入字符串的开始位置
$:匹配输入字符串的结束位置
\b:匹配一个单词边界
\B:匹配非单词边界

1.6 正则表达式的匹配模式(修饰符)

  • ①g全局匹配,找到所有匹配,而不是在第一个匹配后停止
  • ②i匹配全部大小写
  • ③m多行,将开始和结束字符(^和$)视为在多行上工作(也就是,分别匹配每一行的开始和结束(由\n或\r分割),而不只是只匹配整个输入字符串的最开始和最末尾处。
  • ④s与m相反,单行匹配
    var re = /^[a-z]/gim;   //可组合使用

1.7 转义字符

  需要转义的字符:
  点号.
  小括号()
  中括号[]
  左斜杠/
  右斜杠\
  选择匹配符|

  *
  ?
  {}
  +
  $
  ^

2. 正则练习题

2.1 匹配结尾的数字

/\d+$/g

2.2 统计空格个数

字符串内如有空格,但是空格的数量可能不一致,通过正则将空格的个数统一变为一个。

let reg = /\s+/g
str.replace(reg, " ");

2.3 判断字符串是不是由数字组成

str.test(/^\d+$/);

2.4 电话号码正则

  • 区号必填为3-4位的数字
  • 区号之后用“-”与电话号码连接电话号码为7-8位的数字
  • 分机号码为3-4位的数字,非必填,但若填写则以“-”与电话号码相连接
/^\d{3,4}-\d{7,8}(-\d{3,4})?$/

2.5 手机号码正则表达式

正则验证手机号,忽略前面的0,支持130-139,150-159。忽略前面0之后判断它是11位的。

/^0*1(3|5)\d{9}$/

2.6 使用正则表达式实现删除字符串中的空格

funtion trim(str) {
  let reg = /^\s+|\s+$/g
  return str.replace(reg, '');
}

2.7 限制文本框只能输入数字和两位小数点等等

/^\d*\.\d{0,2}$/

2.8 只能输入小写的英文字母和小数点,和冒号,正反斜杠(:./)

/^[a-z\.:\/\\]*$/

2.9 替换小数点前内容为指定内容

var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)

2.10 只匹配中文的正则表达式

/[\u4E00-\u9FA5\uf900-\ufa2d]/ig

2.11 返回字符串的中文字符个数

function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
}

2.12 正则表达式取得匹配IP地址前三段

function getPreThrstr(str) {
  let reg = /\.\d{1,3}$/;
  return str.replace(reg,'');
}

2.13 匹配ul标签之间的内容

/<ul>[\s\S]+?</ul>/i

2.14 用正则表达式获得文件名

可能是直接在盘符根目录下,也可能在好几层目录下,要求替换到只剩文件名。
首先匹配非左右斜线字符0或多个,然后是左右斜线一个或者多个。

function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  // xxx\ 或是 xxx/
  str = str.replace(reg,'');
  return str;
}

2.15 绝对路径变相对路径

var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");

2.16 用户名正则

/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

2.17 匹配英文地址

/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/

2.18 正则匹配价格

开头数字若干位,可能有一个小数点,小数点后面可以有两位数字。

/^\d+(\.\d{2})?$/

2.19 身份证号码的匹配

身份证号码可以是15位或者是18位,其中最后一位可以是X。其它全是数字

/^(\d{14}|\d{17})(X|x)$/

2.20 单词首字母大写

function firstCharUpper(str) {
  str = str.toLowerCase();
  let reg = /\b(\w)/g;
  return str.replace(reg, m => m.toUpperCase());
}

2.21 正则验证日期格式

/^\d{4}-\d{1,2}-\d{1,2}$/

2.22 去掉文件的后缀名

function removeExp(str) {
  return str.replace(/\.\w$/,'')
}

2.23 验证邮箱的正则表达式

/^[\w-]+@\w+\.\w+$/

2.24 正则判断标签是否闭合

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

2.25 正则判断是否为数字与字母的混合

/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i

2.26 将阿拉伯数字替换为中文大写形式

function replaceReg(reg,str){
  let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  let reg = /\d/g;
  return str.replace(reg,function(m){return arr[m];})
}

2.27 去掉标签的所有属性

<td style="width: 23px; height: 26px;" align="left">***</td>
变成没有任何属性的
<td>***</td>
/(<td)\s(?:\s*\w*?\s*=\s*".+?")*?\s*?(>)/

2.28 驼峰表示

String.prototype.camelCase = function () {
        // .*?是非贪婪的匹配,点可以匹配任意字符,星号是前边的字符有0-n个均匹配,问号是则是0-1;
        // (^\w{1}): 用于匹配第一个首字母
        // (.*):用于匹配任意个的前面的字符,.表示的就是任意字符

        // - param 1: 匹配到的字符串
        // - param 2: 匹配的的子字符串
        // - param 3: 匹配的子字符串
        // - param的位置
        // - param 5: 原始字符串 4: 匹配到的字符串在字符串中

        return this.replace(/(^\w{1})(.*)/g, function (match, g1, g2) {
            return g1.toUpperCase() + g2.toLowerCase();
        });
    }

2.29 模板字符串

// str = 'name: @(name), age:@(age)'
       // data = {name : 'xiugang', age : 18}
       /**
        * 实现一个简单的数据绑定
        * @param str
        * @param data
        * @return {*}
        */
       String.prototype.formateString = function (data) {
           return this.replace(/@\((\w+)\)/g, function (match, key) {
               // 注意这里找到的值必须返回出去(如果是undefined,就是没有数据)
               // 注意:判断一个值的类型是不是undefined,可以通过typeof判断
               console.log(typeof data[key] === 'undefined');
               return data[key] === 'undefined' ? '' : data[key];
           });

       }

2.30 去掉两边的空格

/**
        * 去掉两边的空格
        * @param str
        * @return {*}
        */
       String.prototype.trim = function () {
           return this.replace(/(^\s*)|(\s*$)/g, '');
       }

2.31 获取url参数: 使用replace保存到一个数组里面,然后从数组里面取出数据

'http://www.189dg.com/ajax/sms_query.ashx?undefined&undefined&undefined-06-27&undefined-06-27'
 url.replace(/(\w+)=(\w+)/g, function(a, b, c){
   console.log(a, b, c)
 })
action=smsdetail action smsdetail
sid=22 sid 22
stime=2014 stime 2014
etime=2014 etime 2014


// 封装为一个函数
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
function parse_url(_url){
 var pattern = /(\w+)=(\w+)/ig;
 var parames = {};
 url.replace(pattern, function(a, b, c){
   parames[b] = c;
 });
 return parames;
}
var parames = parse_url(url);
alert(parames['classid'] + ", " + parames['id']);
11-27 13:38