正则表达式

正则表达式

今天简单学习了正则表达式，现在把基础知识点做一些记录。

概念

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

作用

1. 判断给定的字符串是否符合正则表达式的过滤逻辑（匹配）
2. 可以通过正则表达式，从字符串中获取我们想要的特定部分（提取）
3. 强大的字符串替换能力（替换）

总而言之，正则表达式的主要作用是：匹配字符串，然后进行操作

特点

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

元字符和限定符

正则表达式的组成：是由元字符或者限定字符组成的一个式子

常用元字符

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

限定符

限定符	说明
*	出现0次或多次
+	出现1次或多次
？	出现0次或1次
{n}	出现n次
{n,m}	出现n次到m次
{n,}	出现n次或多次

其他

1. 字符串用中括号括起来，表示匹配其中任意一个字符，相当于或的意思
2. [^] 匹配除中括号以内的内容
3. \ 转义符
4. | 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
5. () 分组，提升优先级
6. [\u4e00-\u9fa5] 匹配汉字

案例

验证手机号：

^\d{11}$

验证邮编：

^\d{6}$

验证邮箱：

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

[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}

验证IP地址127.0.0.1

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

JavaScript创建正则表达式

方式1：通过调用构造函数的方式创建

var reg=new RegExp(/\d{5}/);

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

方式2：通过字面量的方式创建

var reg = /\d/i;

var reg=/\d{1,5}/;

参数

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

匹配正则表达式

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



console.log(/\d/.test("998"));
console.log(/\d*/.test("998"));
console.log(/\d+/.test("998"));
console.log(/\d{0,}/.test("998"));
console.log(/\d{2,3}/.test("998"));
console.log(/\D/.test("eat"));
console.log(/\s/.test("  "));
console.log(/\S/.test("嘎嘎 "));
console.log(/\w/.test("_"));
console.log(/\W/.test("_"));

案例

验证密码的强度

<style type="text/css">
    #dv{
        width: 300px;
        height:200px;
        position: absolute;
        left:300px;
        top:100px;
    }
    .strengthLv0 {
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv1 {
        background: red;
        height: 6px;
        width: 40px;
        border: 1px solid #ccc;
        padding: 2px;
    }
    .strengthLv2 {
        background: orange;
        height: 6px;
        width: 80px;
        border: 1px solid #ccc;
        padding: 2px;
    }
    .strengthLv3 {
        background: green;
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
    }
</style>

<div id="dv">
    <label for="pwd">密码</label>
    <input type="text" id="pwd" maxlength="16"><!--课外话题-->
    <div>
        <em>密码强度：</em>
        <em id="strength"></em>
        <div id="strengthLevel" class="strengthLv0"></div>
    </div>
</div>

<script>
     function my$(id){
            return document.getElementById("id");
        }
    //获取文本框注册键盘抬起事件
    my$("pwd").onkeyup = function (){
        //每次键盘抬起的时候都要获取文本框中的内容，验证文本框中有什么东西，得到一个级别，然后下面的div显示对应的颜色
        //如果密码的长度小于6，没必要判断
        // if(this.value.length >= 6){
        //     var lvl = getLvl(this.value);
        //     my$("strengthLevel").className="strengthLv"+lvl;
        // }else{
        //     my$("strengthLevel").className="strengthLv0";
        // }   
        my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value):0);

    };
    //输入密码，返回对应的级别
    function getLvl(pwd){
        var lvl = 0;//默认是0级
        //密码中是否有数字，或者字母，或是特殊符号
        if(/[0-9]/.test(pwd)){
            lvl++;
        }
        //判断密码中是不是有字母
        if(/[a-zA-Z]/.test(pwd)){
            lvl++;
        }
        //判断密码中有没有特殊符号
        if(/[^0-9a-zA-Z]/.test(pwd)){
            lvl++;
        }
        return lvl;
    }
</script>

表单验证

  <style type="text/css">
    body {
      background: #ccc;
    }

    label {
      width: 40px;
      display: inline-block;
    }

    span {
      color: red;
    }

    .container {
      margin: 100px auto;
      width: 400px;
      padding: 50px;
      line-height: 40px;
      border: 1px solid #999;
      background: #efefef;
    }

    span {
      margin-left: 30px;
      font-size: 12px;
    }

    .wrong {
      color: red
    }

    .right {
      color: green;
    }

    .defau {
      width: 200px;
      height: 20px;
    }

    .de1 {
      background-position: 0 -20px;
    }
  </style>



<div class="container" id="dv">
  <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
  <label>手机</label><input type="text" id="phone"><span></span><br/>
  <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
  <label>座机</label><input type="text" id="telephone"><span></span><br/>
  <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>

<script>
 function my$(id){
            return document.getElementById("id");
        }
  //qq的
  checkInput(my$("qq"),/^\d{5,11}$/);
  //手机
  checkInput(my$("phone"),/^\d{11}$/);
  //邮箱
  checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
  //座机号码
  checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
  //中文名字
  checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
  //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
  //通过正则表达式验证当前的文本框是否匹配并显示结果
  function checkInput(input,reg) {
    //文本框注册失去焦点的事件
    input.onblur=function () {
      if(reg.test(this.value)){
        this.nextElementSibling.innerText="正确了";
        this.nextElementSibling.style.color="green";
      }else{
        this.nextElementSibling.innerText="让你得瑟,错了吧";
        this.nextElementSibling.style.color="red";
      }
    };
  }
</script>

附录4

正则表达式在线测试工具

电子文档制作工具: docute

流程图工具：DiagramDesigner