JavaScript中正则表达式的使用

创建正则对象

  • RegExp 对象是带有预定义属性和方法的正则表达式对象。 方式一：

var reg = new RegExp("\d", 'i');

方式二：

var reg = /\d/i;

参数

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

正则匹配

  • test() 是一个正则表达式方法。

  • 它通过模式来搜索字符串，然后根据结果返回 true 或 false。

// 匹配日期
var dateStr = "2019-09-10";
var reg = /^\d{4}-\d{2}-\d{2}$/;
console.log(reg.test(dateStr));

匹配正则表达式

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. 验证ip地址

  2. 验证密码强弱

  3. 验证手机号是否合法

var ipStr = "192.168.102.103";
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
console.log(reg.test(ipStr))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>passwordCheck</title> 
<script type="text/javascript" src="Js/jquery1.6.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
        $('#pwd').keyup(function() { 
            var val = $(this).val(); 
            isDigit(val); 
        }); 
           
        function isDigit(s) { 
            var pattern_d = /^\d+$/;            //全数字 
            var pattern_s = /^[A-Za-z]+$/       //全字符 
            var pattern_w = /^\w+$/;            //数字或者字符 
            var pattern_W = /^\W+$/             //全非数字也非字符 
            var pattern_r = /^\w+\W+[\w\W]*\w+$/    //以字母或者数字开头结尾的字符串 
            var html = ''; 
            var x = 0; 
            var y = 0; 
               
            $('#user').html(s); 
            if(pattern_W.exec(s)) { 
                html += '非数字也非字符<br />'; 
                x = 0; 
                y = 0; 
            } 
            if(pattern_w.exec(s)) { 
                html += '数字或者字符<br />'; 
                y = 1; 
            } 
            if(pattern_d.exec(s)) { 
                html += '全数字<br />'; 
                x = 1; 
                y = 0; 
            } 
            if(pattern_s.exec(s)) { 
                html += '全字符<br />'; 
                x = 2; 
                y = 0; 
            } 
            if(pattern_r.exec(s)) { 
                html += '以字母或者数字开头结尾的字符串<br />'; 
                x = 3; 
                y = 2; 
            } 
            if( y === 0 && x === 0) { 
                html += '密码格式错误<br />'; 
            } 
            if( x > 0 && y === 0) { 
                html += '安全级别《低》<br />'; 
            } 
            if( x === 0 && y === 1) { 
                html += '安全级别《中》<br />'; 
            } 
            if( y === 2) { 
                html += '安全级别《高》<br />'; 
            } 
            html += x + '<br />' + y; 
            $('#password').html(html); 
        }; 
    }); 
</script> 
</head> 
   
<body> 
<form action="#" method="#"> 
    用户名：<input type="text" name="" /><span id="user"></span><br /> 
    密码：<input type="password" name="" id="pwd" /><span id="password"></span><br /> 
</form> 
</body> 
</html> 
var phoneNumStr = "15897808512";
var reg = /^1[3456789]\d{9}$/;
console.log(reg.test(phoneNumStr));

正则提取

search

  • 方法使用表达式来搜索匹配，然后返回匹配的位置。

var str = "Visit W3School!"; 
var n = str.search("W3School");
// var n = str.search(/W3School/);
console.log(n)
match

  • 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

var peopleStr = "张三：1000， 李四：5000， 王五：8000";

var array = peopleStr.match(/\d+/g);

console.log(array);
分组
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);

}
正则替换

replace替换与正则表达式匹配的子串。

var str="Visit Microsoft!";

document.write(str.replace(/Microsoft/, "W3School"));

案例：表单验证

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,10}$/;
    // 判断是否成功
    if(!reg.test(this.value)){
        // 验证不成功
        span.innerText = "请输入正确的QQ号";
        span.style.color = "red";
    }else{
        // 验证成功
        span.innerText = "";
        span.style.color = "";
    }
};
​
// txtPhone
txtPhone.onblur = function() {
    var span = this.nextElementSibling;
    var reg = /^1[3456789]\d{9}$/;
    if(!reg.test(this.value)){
        // 验证不成功
        span.innerText = "请输入正确的手机号";
        span.style.color = "red";
    }else{
        span.innerText = "";
        span.style.color = "";
    }     
};

封装成函数：

var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheckBirthday(txtBirthday, regBirthday, "请输入正确的出生日期：");
function addCheckBirthday(element, reg, tip) {
    element.onblur = function() {
      // 获取当前的文本框对应的span
        var span = this.nextElementSibling;
       // 判断验证是否成功
        if(!regBirthday.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;
}

JavaScript中使用正则表达式的更多相关文章

  1. JavaScript中的正则表达式（终结篇）

    JavaScript中的正则表达式(终结篇) 在之前的几篇文章中,我们了解了正则表达式的基本语法,但那些语法不是针对于某一个特定语言的.这篇博文我们将通过下面几个部分来了解正则表达式在JavaScri ...

  2. Javascript中的正则表达式

    Javascript中的正则表达式 刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个 ...

  3. 浅谈JavaScript中的正则表达式

    引言 对于正则表达式我想作为程序员肯定使用过它,那天书般的表达方式,我用一次就记住它了.这篇博客先介绍一些正则表达式的内容,然后介绍JavaScript中对正则表达式特有的改进.下面开始介绍正则表达式 ...

  4. 转载 javascript中的正则表达式总结 一

    定义正则表达式的方法 定义正则表达式的方法有两种:构造函数定义和正则表达式直接量定义.例如: var reg1 = new RegExp('\d{5, 11}'); // 通过构造函数定义 var r ...

  5. C++、Java、JavaScript中的正则表达式

    C++(VS2013编译器):http://msdn.microsoft.com/zh-cn/library/bb982727.aspx#grammarsummary Java:            ...

  6. 浅谈JavaScript中的正则表达式（适用初学者观看）

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  7. 精通 JavaScript中的正则表达式

    精通 JS正则表达式 (精通?标题党 ) 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证  ...

  8. JavaScript中的正则表达式详解

    摘要:javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的相关知识和用法. 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本 ...

  9. javascript中的正则表达式学习

    一.前言 关于正则表达式自身的语法这里不做过多介绍(详情可参见http://www.php100.com/manual/unze.html),这里仅仅解释javascript中和正则表达式相关的几个方 ...

  10. JavaScript 中的正则表达式

    1.正则表达式概述 ECMAScript 3 开始支持正则表达式,其语法和 Perl 语法很类似,一个完整的正则表达式结构如下: 1 var expression = / pattern / flag ...

随机推荐

  1. Matlab Robotics Toolbox 仿真计算：Kinematics, Dynamics, Trajectory Generation

    1. 理论知识 理论知识请参考: 机器人学导论++(原书第3版)_(美)HLHN+J.CRAIG著++贠超等译 机器人学课程讲义(丁烨) 机器人学课程讲义(赵言正) 2. Matlab Robotic ...

  2. 进程-（process）、线程-（Thread）

    进程和线程之间的区别: 内存之间的区别: 进程之间不可以共享内存空间,每个进程都有各自独立的内存空间: 线程之间则是可以共享一个进程里的内存空间: 通信机制方面的区别 默认情况下,进程之间很难互通的, ...

  3. 7个点说清楚spring cloud微服务架构

    前言 spring cloud作为当下主流的微服务框架,让我们实现微服务架构简单快捷,spring cloud中各个组件在微服务架构中扮演的角色如下图所示,黑线表示注释说明,蓝线由A指向B,表示B从A ...

  4. GitHub 上的 12306 抢票神器，助力回家过年

    又到周末了,不过本周末有些略微的特殊. 距离每年一次的全球最大规模的人类大迁徙活动已经只剩下一个多月了,各位在外工作一年的小伙伴大多数人又要和小编一样摩拳擦掌的对待史上最难抢的抢票活动. 然鹅,身为一 ...

  5. python基础知识第五篇(字典)

    字典(dict) info={ "k1":"v1", "k2":"value" } 字典的value可以是任意值,布尔值 ...

  6. git项目创建及在idea工具中使用

    1.安装git管理工具 2.在自己github账号上创建一个项目仓库,比如我创建的是renrenView 网页翻译如下: 参数解析如下: 3.本地项目同步到远程仓库步骤 在本地初始化git项目 git ...

  7. 这几天加班熬夜把所有Python库整理了一遍，非常全面！

    库名称简介 Chardet 字符编码探测器,可以自动检测文本.网页.xml的编码.colorama 主要用来给文本添加各种颜色,并且非常简单易用.Prettytable 主要用于在终端或浏览器端构建格 ...

  8. 百度大脑IOCR财会票据识别技术接入小程序，快速实现财会票据识别

    本文主要介绍iOCR财会票据识别的小程序功能实现. 想了解微信小程序的开发过程,请参看我之前的帖子:<UNIT接入小程序>https://ai.baidu.com/forum/topic/ ...

  9. MySQL数据库Group by分组之后再统计数目Count(*)与不分组直接统计数目的区别

    简述问题“统计最新时刻处于某一状态的设备的数量” 1. 首先子查询结果,可以看到每个设备最新的状态信息 2.1 在子查询的基础上,对设备状态进行分组,进行统计每个状态的设备数量 2.1.1 可以看到处 ...

  10. sql server查询（SELECT ，where，distinct，like 查询，in，is null，group by 和having，order by，as）

    基本查询: 实例表 示例表 --部门表 create table dept( deptno int primary key,--部门编号 dname ),--部门名 loc )--地址 ); --雇员 ...