JavaScript 中使用正则表达式

简介: JavaScript 中使用正则表达式

一、JavaScript 中使用正则表达式


创建正则对象


方式1:


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


方式2:


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


参数


image.png


正则匹配


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


匹配正则 .test(“xxx”);


后面加上.test("你需要匹配的内容")进行测试即可


例如:


    console.log(/./.test("除了回车换行以为的任意字符"));//true
    console.log(/.*/.test("0个到多个"));//true
    console.log(/.+/.test("1个到多个"));//true
    console.log(/.?/.test("哈哈"));//true
    console.log(/[0-9]/.test("9527"));//true
    console.log(/[a-z]/.test("what"));//true
    console.log(/[A-Z]/.test("Are"));//true
    console.log(/[a-zA-Z]/.test("干啥子"));//false
    console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
    console.log(/b|(ara)/.test("abra"));//true
    console.log(/[a-z]{2,3}/.test("arfsf"));//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("_"));//true


正则表达式案例


1.验证密码强弱


https://yangyongli.blog.csdn.net/article/details/116397469


2.验证邮箱:


验证邮箱:[0-9a-zA-Z_.-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
<script>
  //如果输入的是邮箱,那么背景颜色为绿色,否则为红色
  //获取文本框,注册失去焦点的事件
  document.getElementById("email").onblur = function () {
    //判断这个文本框中输入的是不是邮箱
    var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
    if (reg.test(this.value)) {
      this.style.backgroundColor = "green";
    } else {
      this.style.backgroundColor = "red";
    }
  };
</script>
</body>
</html>


3.验证中文名字


验证中文名字[\u4e00-\u9fa5]


正则提取



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


正则替换



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


二、正则功能函数封装


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 = "";
      // 判断失败:代码任意
    }
  };
}


三、综合案例:表单信息验证


内容过多,各位请移驾另一篇博客:


https://yangyongli.blog.csdn.net/article/details/116398380

相关文章
|
2月前
|
移动开发 JavaScript 前端开发
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
59 1
|
2月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
2月前
|
JavaScript 前端开发
javascript中的正则表达式
javascript中的正则表达式
|
3月前
|
JavaScript 前端开发
JavaScript中的正则表达式构造函数和正则表达式字面量
JavaScript中的正则表达式构造函数和正则表达式字面量
|
1月前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
4月前
|
JavaScript 前端开发 API
【JavaScript】<正则表达式Regular Expression>JavaScript正则表达式解析
【1月更文挑战第17天】【JavaScript】<正则表达式Regular Expression>JavaScript正则表达式解析
|
21天前
|
JavaScript 前端开发 索引
JavaScript中的正则表达式:使用与模式匹配
【4月更文挑战第22天】本文介绍了JavaScript中的正则表达式及其模式匹配,包括字面量和构造函数定义方式,以及`test()`、`match()`、`search()`和`replace()`等匹配方法。正则表达式由元字符(如`.`、`*`、`[]`)和标志(如`g`、`i`)组成,用于定义搜索模式。文中还分享了正则使用的技巧,如模式分解、非捕获分组和注释。掌握正则表达式能提升文本处理的效率和代码质量。
|
1月前
|
JavaScript 前端开发
深入了解JavaScript中的正则表达式构造函数和正则表达式字面量
深入了解JavaScript中的正则表达式构造函数和正则表达式字面量
193 1
|
2月前
|
监控 JavaScript 前端开发
JavaScript 正则表达式详解
【2月更文挑战第26天】
37 1
JavaScript 正则表达式详解
|
4月前
|
JavaScript
js如何去实现用正则表达式来判断一个值
js如何去实现用正则表达式来判断一个值
14 0