WEB前端JavaScript高级—正则表达式

最新推荐文章于 2024-07-24 10:40:52 发布

韦德曼

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量40

点赞数

分类专栏：前端文章标签：前端 javascript 正则表达式

本文链接：https://blog.csdn.net/weideman/article/details/134721168

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

简介

什么是正则

正则表达式：用于匹配字符串规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用，通常被用来检索、替换那些符合某个模式或规则的文本
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

作用

给定的字符串是否符合正则表达式的过滤逻辑(匹配)
通过正则表达式，从字符串中获取想要的特定部分(提取)
强大的字符串替换能力(替换)

元字符

常用元字符

元字符	说明
`\d`	匹配数字
`\D`	匹配任意非数字的字符
`\w`	匹配字母或数字或下划线
`\W`	匹配任意不是字母，数字，下划线
`\s`	匹配任意的空白符
`\S`	匹配任意不是空白符的字符
`.`	匹配除换行符以外的任意单个字符
`^`	表示匹配行首的文本(以谁开始)
`$`	表示匹配行尾的文本(以谁结束)

限定符

限定符	说明
`*`	重复零次或更多次
`+`	重复一次或更多次
`?`	重复零次或一次
`{n}`	重复n次
`{n,}`	重复n次或更多次
`{n,m}`	重复n到m次
`[]`	字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思
`\`	转义符
`	`
`()`	从多个字符中选择一个，如`gr(a

JS正则

创建正则对象

方式1：

var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');

方式2：

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

参数

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

test方法

语法:

var reg = /\d{1,5}/;
var flag = reg.test("小苏的幸运数字:888");
console.log(flag);
// 简写为 /\d{1,5}/.test("小苏的幸运数字:888");

注意:

escape(str)：可将中文的str转码
unescape()：相反，可以解码为中文

易错点： ->注意，

console.log(/.?/.test("哈哈"));	   // true, 这是非严格模式
console.log(/\d/.test("998"));		// true
console.log(/\d*/.test("998"));		// true
console.log(/\d+/.test("998"));		// true
console.log(/\d{0,}/.test("998"));	// true
console.log(/\d{2,3}/.test("998"));	// true
console.log(/\D/.test("eat"));		// true
console.log(/\s/.test("  "));		// true
console.log(/\S/.test("嘎嘎"));	   // true
console.log(/\w/.test("_"));		// true
console.log(/\W/.test("_"));		// false

match方法

返回值：数组，里面包含匹配到的内容

示例：

var str = "中国移动:10086,中国联通:10010,中国电信:10000";
var array = str.match(/\d{5}/g);
console.log(array);

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

// 2. 提取email地址
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

打组:

var str = "2017-11-12";
var array = str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
console.log(RegExp.$3);				// 提取用()包围起来的第3组: 12

// 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);
}

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

replace方法

返回值：替换后的字符串。

示例：

var str = "  哦买噶的    ,太幸福了  ";
console.log(str.replace(/\s+/g, ""));	// 空白符 -> 空字符
// str.trim(); 只能去除两边的空格，中间的无法去除。

exec方法

返回值：数组，包含匹配内容的详细信息

例子:

var str = "中国移动:10086,中国联通:10010,中国电信:10000";
var array = /\d{5}/g.exec(str);
while (array != null){
    console.log(array[0]);			// 输出匹配的内容
    array = reg.exec(str);			// 接着寻找下一个
}

注意：该方法的效果和str.match()类似，但此方法麻烦(需要遍历)，所以一般不用

案例：表单验证

QQ号：<input type="text" id="txtQQ"><span></span><br>
邮箱：<input type="text" id="txtEMail"><span></span><br>
手机：<input type="text" id="txtPhone"><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>

// 获取文本框
const txtQQ = document.getElementById("txtQQ");
const txtEMail = document.getElementById("txtEMail");
const txtPhone = document.getElementById("txtPhone");
const txtBirthday = document.getElementById("txtBirthday");
const txtName = document.getElementById("txtName");

txtQQ.onblur = function () {
    // 获取当前文本框对应的span
    var span = this.nextElementSibling;
    var reg = /^\d{5,12}$/;
    // 判断验证是否成功
    if(!reg.test(this.value)) {
        //验证不成功
        span.innerText = "请输入正确的QQ号";
        span.style.color = "red";
    } else {
        //验证成功
        span.innerText = "";
        span.style.color = "";
    }
};

//txtEMail
txtEMail.onblur = function () {
    //获取当前文本框对应的span
    var span = this.nextElementSibling;
    var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
    // 判断验证是否成功
    if(!reg.test(this.value)) {
        span.innerText = "请输入正确的EMail地址";
        span.style.color = "red";
    } else {
        span.innerText = "";
        span.style.color = "";
    }
};

表单验证部分，封装成函数：

var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");
//给文本框添加验证
function addCheck(element, reg, tip) {
    element.onblur = function () {
        //获取当前文本框对应的span
        var span = this.nextElementSibling;
        //判断验证是否成功
        if(!reg.test(this.value) ){
            //验证不成功
            span.innerText = tip;
            span.style.color = "red";
        }else{
            //验证成功
            span.innerText = "";
            span.style.color = "";
        }
    };
}

通过给元素增加自定义验证属性对表单进行验证：

<form id="frm">
  QQ号：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
  邮箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
  手机：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
  生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
  姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>

// 所有的验证规则
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;
}