正则表达式

最新推荐文章于 2024-09-30 15:42:36 发布

Memory_Sweet

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量174

点赞数

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

本文链接：https://blog.csdn.net/qq_40755886/article/details/79773280

版权

技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

正则表达式

什么是正则表达式

正则表达式: 正则表达式是对字符串操作的一种逻辑公式, 就是用事先定义好的一些特定字符、及这些特定字符的组合, 组成一个'规则字符串',这个'规则字符串'用来表达对字符串的一种过滤逻辑.

正则表达式的作用

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

正则表达式的特点

灵活性、逻辑性和功能性非常强
可以迅速地用极简单的方式达到字符串的复杂控制

正则表达式的组成

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

元字符

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

限定符

限定符	说明
*	重复零次或多次
+	重复一次或多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或多次至少n次
{n,m}	重复n到m次

其他

[]   字符串用中括号 括起来, 表示匹配其中的任一字符, 相当于或的意思
[^]  匹配除中括号以内的内容
\    转义符
|    或者,选择两者中的一个
()   从两个直接量中选择一个分组
[\u4e00-\u9fa5] 匹配汉字

案例

验证手机号:

^\d{11}$

验证邮编:

^\d{6}$

验证日期 2015-5-01

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

验证邮箱 xxx@itcast.cn

^\w+@\w+\.\w+$

验证IP地址 192.168.1.10

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

JavaScript中使用正则表达式

创建正则对象

方式1: 构造函数

var regularExpression = new RegExp('\\d', 'i');
var regularExpression = new RegExp('\\d', 'gi');

方式2: 字面量

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

参数:

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

正则匹配

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

正则提取

// match  
// 1.提取工资
var str = '张三: 1000, 李四:5000, 王五: 8000';
var reg = /\d+/g;
console.log(reg.exec(str)); //  [1000]
console.log(str.match(/\d+/g)); // [1000][5000][8000]

// 2. 提取邮箱地址
var str = '12323@xx.com,14253566@xx.cn,124353@x.com,1244566@qq.com....';
console.log(str.match(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g));

// 3. 提取年份中的一部分
 // 正则表达式中的()作为分组来使用获取分组匹配到的结果用 RegExp.$1 $2
var dateStr = '2018-03-31';      
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
    console.log(RegExp.$1);
}

正则替换

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

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

案例表单验证

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>

//获取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var 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 = "";
  }
};