正则表达式

~嘘~禁止想象~

于 2020-07-31 17:35:02 发布

阅读量293

点赞数 1

分类专栏：前端 # JavaScript知识点

本文链接：https://blog.csdn.net/weixin_45773503/article/details/107634256

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript知识点

36 篇文章 0 订阅

订阅专栏

文章目录

目标

能够说出正则表达式的作用
能够写出简单的正则表达式
能够用正则表达式对表单进行验证
能够使用正则表达式替换内容

1. 正则表达式的概述

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符组合的模式，在JavaScript中，正则表达式也是对象。

正则表达式通常被用来检索，替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中输入中文（匹配），此外，正则表达式还常用于过滤掉页面中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript正则表达式完成表单验证

1.2 正则表达式的特点

灵活性，逻辑性和功能性非常强
可以迅速的用极简单的方式达到字符串的控制
对于刚接触的人来说，比较晦涩难懂，比如：

	//关于邮箱的正则表达式
	^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

实际开发，一般都是直接复制写好的正则表达式。但是要求对使用正则表达式根据实际情况修改正则表达式，比如用户名：/^[a-z0-9_-]{3,16}$/

2. 正则表达式在JavaScript中的使用

2.1 创建正则表达式

在JavaScript中，可以通过两种方式创建一个正则表达式

通过RegExp对象的构造函数创建

var 变量名 = new RegExp(/表达式/);

通过字面量创建

var 变量名 = /表达式/;

        // 正则表达式在js中的使用
        // 创建时不能加引号
        // 1.利用RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);
        // 2. 利用字面量创建正则表达式
        var rg = /123/;
        console.log(rg.test(123)); //判断123是否符合正则规范

2.2 测试正则表达式test

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其中是测试字符串。

regexObj.test(str)

regexObj 是写的正则表达式
str 我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范

    <script>
        // 正则表达式在js中的使用
        // 1.利用RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);
        // 2. 利用字面量创建正则表达式
        var rg = /123/;
        //用来检查字符串是否符合正则表达式要求的规范
        console.log(rg.test(123)); //true//判断123是否符合正则规范
        console.log(rg.test(231)); //flase
        console.log(rg.test('abc123')); //true//判断abc123是否符合正则规范
        console.log(rg.test('231abc')); //false//231abc必须要有连续的123
    </script>

3. 正则表达式的组成

3.1 概述

一个正则表达式可以由简单的字符构成，比入/abc/，也可以是简单和特殊字符的组合，比如/ab*c/，其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号如^, $, +

3.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

如果^和$在一起，表示必须是精确匹配

    <script>
        var rg = /abc/; //正则表达式中无需加引号，不管是数字还是字符串
        console.log(rg.test('abc')); //true
        console.log(rg.test('abcd')); //true
        console.log(rg.test('aabcd')); //true
        console.log('-------------------------');
        var reg = /^abc/;
        console.log(reg);
        console.log(reg.test('abc')); //true
        console.log(reg.test('abcd')); //true
        console.log(reg.test('aabcd')); //false
        console.log('-------------------------');
        var reg1 = /^abc$/; // 必须是abc字符串才符合规范
        console.log(reg1.test('abc')); //true
        console.log(reg1.test('abcd')); //false
        console.log(reg1.test('aabcd')); //false
        console.log(reg1.test('abcabc')); //false
    </script>

3.3 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了，所有可供选择的字符都放在方括号内

[-]方括号内部范围符

    <script>
        var rg = /[abc]/; //只要包含有a 或者包含有b 或者包含有c都返回true
        console.log(rg.test('andy')); //true
        console.log(rg.test('baby')); //true
        console.log(rg.test('color')); //true
        console.log('-------------------------');
        var rg1 = /^[abc]$/; //只有a 或者b 或者c 返回true
        console.log(rg1.test('a')); // true
        console.log(rg1.test('b')); // true
        console.log(rg1.test('c')); // true
        console.log(rg1.test('aa')); // false
        console.log('-------------------------');
        var rg2 = /^[a-z]$/; // 26个英文字母都可以
        console.log(rg2.test('a')); //true
        console.log(rg2.test('A')); //false
        console.log('-------------------------');
        var rg3 = /^[a-zA-Z0-9_-]$/; // 26个英文字母都可以(大小写) + 数字 + '_' + '-'
        console.log(rg3.test('a')); // true
        console.log(rg3.test('A')); // true
        console.log(rg3.test('0')); // true
        console.log(rg3.test('_')); // true
        console.log(rg3.test('-')); // true
        console.log('-------------------------');
        var rg4 = /^[^a-zA-Z0-9_-]$/; // 取反中括号内有^那么取反 26个英文字母都可以(大小写) + 数字 + '_' + '-'
        console.log(rg4.test('a')); // false
        console.log(rg4.test('A')); // false
        console.log(rg4.test('0')); // false
        console.log(rg4.test('_')); // false
        console.log(rg4.test('-')); // false
    </script>

3.4 量词符

量词符用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

    <script>
        var reg0 = /^a*$/;
        console.log(reg0.test("")); // true
        console.log(reg0.test("a")); // true
        console.log(reg0.test("aaaa")); // true
        console.log('------------------');

        var reg1 = /^a+$/;
        console.log(reg1.test("")); //false
        console.log(reg1.test("a")); // true
        console.log(reg1.test("aaaa")); // true
        console.log('------------------');

        var reg2 = /^a?$/;
        console.log(reg2.test("")); // true
        console.log(reg2.test("a")); // true
        console.log(reg2.test("aaaa")); //false
        console.log('------------------');

        // {3}就是重复3次
        var reg3 = /^a{3}$/;
        console.log(reg3.test("")); // false
        console.log(reg3.test("a")); // false
        console.log(reg3.test("aaaa")); //false
        console.log(reg3.test("aaa")); //true
        console.log('------------------');

        // {3,} 大于等于3
        var reg4 = /^a{3,}$/;
        console.log(reg4.test("")); // false
        console.log(reg4.test("a")); // false
        console.log(reg4.test("aaaa")); //true
        console.log(reg4.test("aaa")); //true
        console.log('------------------');

        // {3,16}大于等于3 并且 小于等于16
        var reg5 = /^a{3,16}$/;
        console.log(reg5.test("")); // false
        console.log(reg5.test("a")); // false
        console.log(reg5.test("aaaa")); //true
        console.log(reg5.test("aaa")); //true
    </script>

一个合格的表单验证

    <script>
        var reg = /^[0-9a-zA-Z]{6,16}$/
        console.log(reg.test("aa")); //false
        console.log(reg.test("1234SsdfS")); //true
    </script>

案例：表单验证
https://blog.csdn.net/weixin_45773503/article/details/107647647

3.5 括号总结

大括号量词符，表示重复次数
中括号字符集合。匹配方括号中的任意字符
小括号表示优先级

在线测试：http://c.runoob.com/

        var reg = /^[abc]$/;
        var reg = /^abc{3}$/; //只是让c重复三次 只有 abccc 是 true
        var reg = /^(abc){3}$/; // ()表示优先级

3.6 预定类

预定类是指某些常见模式的简写方法。

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母，数字下划线，相当于[A-Za-z+0-9_]
\W	匹配任意的字母，数字下划线以外的字符，相当于[^A-Za-z+0-9_]
\s	匹配空格（包括换行符，制表符，空格符等，相当于[\t\r\n\v\f]
\S	匹配空格（匹配非空格的字符，相当于[^\t\r\n\v\f]

常用正则表达式 https://c.runoob.com/front-end/854

~嘘~禁止想象~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

文章目录目标1. 正则表达式的概述1.1 什么是正则表达式1.2 正则表达式的特点2. 正则表达式在JavaScript中的使用2.1 创建正则表达式2.2 测试正则表达式test3. 正则表达式的组成3.1 概述3.2 边界符3.3 字符类3.4 量词符目标能够说出正则表达式的作用能够写出简单的正则表达式能够用正则表达式对表单进行验证能够使用正则表达式替换内容1. 正则表达式的概述1.1 什么是正则表达式正则表达式（Regular Expression）是用于匹配字符组合的模式，在J
复制链接

扫一扫