2018-04-11

正则表达式

用于匹配规律规则的表达式
注意: 表达式中不能有空格, 除非要匹配空格, 否则会产生问题或者报错
作用:
    1. 给定的字符串是否符合正则表达式的过滤逻辑(匹配)
    2. 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
    3. 强大的字符串替换能力(替换)

正则表达式的测试

• 在线测试正则

正则表达式的组成

• 普通字符: abc 123 _
• 特殊字符(元字符)：正则表达式中有特殊意义的字符\d \w

元字符

常用元字符

元字符	说明
\d	匹配任意数字的单个字符
\D	匹配任意非数字的单个字符
\w	匹配任意字母或数字或下划线的单个字符
\W	匹配任意不是字母，数字，下划线的单个字符
\s	匹配任意的单个空白符
\S	匹配任意不是空白符的单个字符
.	匹配除换行符以外的任意单个字符
^	表示匹配行首的文本(必须处于第一位)
$	表示匹配行尾的文本(必须处于最后一位)

限定符

修饰普通字符或者元字符

限定符	说明
*	重复零次或多次
+	重复一次或多次
?	重复零次或一次(防止贪婪模式)
{n}	重复n次
{n,}	重复n次或多次
{n,m}	重复n到m次

其它

[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思
[^]  匹配除中括号以内的内容, 相当于非的意思
\ 转义符, 将特殊字符转化为普通字符
| 或者，两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
() 从两个直接量中选择一个，分组
   eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5]  匹配汉字

[0-9] 表示的是0到9之间的任意的一个数字(包含0,也包含9) "hello98"
[a-z] 表示所有的小写的字母中的任意一个
[A-Z] 表示的所有的大写字母中的任意一个
[a-zA-Z] 表示的所有的大小写字母中的任意一个
[0-9a-zA-Z] 表示的是所有的数字和字母中任意一个
[yY]--->就是一个字符 Y或者y  "fdYsfds"
特殊元字符放在[]中变为普通字符
[.]---->就是一个普通的 .
添加 - 普通字符时 将其放在最后
[._-]

案例

验证手机号：

^\d{11}$

验证邮编：

^\d{6}$

验证日期 2012-5-01

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

验证邮箱 [email protected] 或者 [email protected]：

^\w+@\w+(\.\w+){1,2}$

验证IP地址 192.168.1.10

^\d{1,3}\(.\d{1,3}){3}$

JavaScript 中使用正则表达式

创建正则对象

构造函数：

var reg = new RegExp('\\d');
var reg = new RegExp('\\d', 'gi');
注意: \d \D \s \S \w \W 需要转义

字面量：

var reg = /\d/;
var reg = /\d/gi;

参数

标志	说明
i	忽略大小写
g	全局匹配
gi	全局匹配+忽略大小写

与正则有关的方法

RegExp:
    test 匹配
    exec 提取
String:
    match 提取
    replace 替换
    split 切割
    search 搜索

正则匹配

test

语法:
    正则表达式.test(str)  返回布尔值

// 匹配日期
var dateStr = '2015-10-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
console.log(reg.test(dateStr));// true

正则提取

exec

语法: 
    正则表达式.exec(str)  返回第一个匹配的值, 即使正则表达式有全局匹配符 g, 匹配不到数值时为值为null

//匹配数字
var str = 'hfghg123hfh123fhfh123';
console.log(/\d+/g.exec(str));// 123
console.log(/\d+/g.exec(str));// 123

match

语法: 
    str.match(正则表达式)  以数组的形式返回匹配的值; 全局匹配记得加 g , 匹配不到数值时为值为null

// 1. 提取工资
var str = "张三：1000，李四：5000，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);// ["1000", "5000", "8000"]

// 2. 提取email地址
var str = "[email protected],[email protected] [email protected] 2、[email protected] [email protected]...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);// ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"]

split

语法: 
    str.split(正则表达式)  用正则表达式匹配到分隔符, 以数组的形式返回分割后的值

// 用 @ 或者 . 将字符串分割
var str = '[email protected]';
var arr = str.split(/@|\./);
console.log(arr);// ["116", "qq", "com"]

RegExp.$分组提取

正则表达式中的()可以作为分组来使用, 想获取那部分就在那部分正则表达式上加上小括号 ,获取分组匹配到的结果用Regex.$1 $2 $3....来获取

// 3. 分组提取  
// 3. 提取日期中的年部分  2015-5-10
var dateStr = '2016-1-5';
// 正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3....来获取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);// 2016
}

// 4. 提取邮件中的每一部分
var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "[email protected]";
if (reg.test(str)) {
  console.log(RegExp.$1);// 123123
  console.log(RegExp.$2);// xx
  console.log(RegExp.$3);// com
}

replace

语法: 
    str.replace(正则表达式, 要替换的值 / function(value){})  函数的参数为匹配到的值; 返回处理之后的字符串

// 1. 替换所有空白
var str = "   123AD  asadf   asadfasf  adf ";
str = str.replace(/\s/g,"xxx");
console.log(str);// xxxxxxxxx123ADxxxxxxasadfxxxxxxxxxasadfasfxxxxxxadfxxx

// 2. 替换所有,|，中英文逗号
var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ".");
console.log(str);// abc.efg.123.abc.123.a

// 3. 替换特殊字符为字符实体
function escapeHtml(str) {
  str = str.replace(/[<>&"]/g, function (match) {
    switch(match){
      case "<": return "<";
      case ">": return ">";
      case "&": return "&";
      case "\"": return """;
    }
  });
  return str;
}
console.log(escapeHtml("<>dudhfk\"ahs&asdasd"));// <>dudhfk"ahs&asdasd

search

语法: 
    str.search(正则表达式)  返回第一个匹配的字符或字符串的索引(从0开始), 匹配不到返回-1

var str = '1 BC abc BC ,efg,123，abc,123，a';
console.log(str.search(/1/gi));// 0

可重用的表单验证形式

  
  QQ号：

  邮箱：

  手机：

  生日：

  姓名：

// 所有的验证规则
var rules = [
  {
    name: 'qq',
    reg: /^\d{5,12}$/,
    tip: "请输入正确的QQ"
  },
  {
    name: 'email',
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "请输入正确的邮箱地址"
  },
  {
    name: 'phone',
    reg: /^\d{11}$/,
    tip: "请输入正确的手机号码"
  },
  {
    name: 'date',
    reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
    tip: "请输入正确的出生日期"
  },
  {
    name: 'cn',
    reg: /^[\u4e00-\u9fa5]{2,4}$/,
    tip: "请输入正确的姓名"
  }];

addCheck('frm');


//给文本框添加验证
function addCheck(formId) {
  var i = 0,
      len = 0,
      frm =document.getElementById(formId);
  len = frm.children.length;
  for (; i < len; i++) {
    var element = frm.children[i];
    // 表单元素中有name属性的元素添加验证
    if (element.name) {
      element.onblur = function () {
        // 使用dataset获取data-自定义属性的值
        var ruleName = this.dataset.rule;
        var rule =getRuleByRuleName(rules, ruleName);

        var span = this.nextElementSibling;
        //判断验证是否成功
        if(!rule.reg.test(this.value) ){
          //验证不成功
          span.innerText = rule.tip;
          span.style.color = "red";
        }else{
          //验证成功
          span.innerText = "";
          span.style.color = "";
        }
      }
    }
  }
}

// 根据规则的名称获取规则对象
function getRuleByRuleName(rules, ruleName) {
  var i = 0,
      len = rules.length;
  var rule = null;
  for (; i < len; i++) {
    if (rules[i].name == ruleName) {
      rule = rules[i];
      break;
    }
  }
  return rule;
}