JavaScript进阶 - 正则表达式

2021/7/12 20:08:10

编程Tag： javascript var 正则表达式 console 进阶 test RegExp log

本文主要是介绍JavaScript进阶 - 正则表达式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

二、正则表达式在JavaScript中使用
- 利用RegExp对象来创建正则表达式
- 通过字面量创建
三、测试正则表达式test
四、正则表达式的组成
- 特殊字符
五、字符类
六、量词符
- 练习：用户名检测
七、预定义类
八、正则替换
- 正则表达式参数

# 一、什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。
正则表达式通常被用来检索，替换那些符合某个模式的文本。

二、正则表达式在JavaScript中使用

利用RegExp对象来创建正则表达式

var regexp = new RegExp(/表达式/);

通过字面量创建

var 变量名 = /表达式/;

三、测试正则表达式test

test() 正则对象方法，用于检测字符串是否符合该规则。

<script>
    var regexp = new RegExp(/123/);  // 只要包含有123就为true
    console.log(regexp.test(123));  // true
    console.log(regexp.test('abc'));  // false
</script>

四、正则表达式的组成

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

特殊字符

^ : 匹配行首的文本（以谁开始）
$ : 匹配行尾的文本（以谁结束）

<script>
    var regexp = new RegExp(/^123/);  // 表示以123开头
    console.log(regexp.test(1234));  // true
    console.log(regexp.test(1123));  // false
</script>

<script>
    var regexp = new RegExp(/123$/);  // 表示以123结尾
    console.log(regexp.test(1234));  // false
    console.log(regexp.test(1123));  // true
</script>

<script>
    var regexp = new RegExp(/^123$/);  // 表示必须是123，其他的都不行
    console.log(regexp.test(123));  // true
    console.log(regexp.test(1123));  // false
</script>

五、字符类

[ ]表示有一系列字符可供选择，只有匹配其中一个就可以了。

<script>
    var regexp = new RegExp(/[123]/);  // 匹配其中的一个就可以
    console.log(regexp.test(1456));  // true
    console.log(regexp.test(246));  // true
</script>

<script>
    var regexp = new RegExp(/^[123]$/);  // 表示只有是 a，b，c里面的其中一个才为true
    console.log(regexp.test(123));  // false
    console.log(regexp.test(2));  // true
</script>

[-] ：方括号范围符 -

<script>
    var regexp = new RegExp(/[a-z]/);  // 表示a-z之间的任意一个字符都可以
    console.log(regexp.test('a'));  // true
    console.log(regexp.test('z'));  // true
</script>

[ ]里面的^表示取反

<script>
    var regexp = new RegExp(/[^a-z]/);  // []里面的^表示取反的意思
    console.log(regexp.test('a'));  // false
    console.log(regexp.test(1));  // true
</script>

六、量词符

* : 重复零次或更多次
+ ：重复一次或更多次
？：重复零次或一次
{n} ：重复n次
{n,} ：重复n次或更多次
{n, m} ：重复n到m次

<script>
    var regexp = new RegExp(/^[a-z]{6}$/);  // {}表示重复前面的字符多少次
    console.log(regexp.test('aaaaaa'));  // true
    console.log(regexp.test('a'));  // flase
</script>

练习：用户名检测

<body>
    <input type="text"><span>请输入用户名</span>
    <script>
        // 正则表达式
        var regexp = new RegExp(/^[a-zA-Z0-9_-]{3,6}$/);  // {}表示重复前面的字符多少次
        // 获取元素
        var input = document.querySelector('input');
        var span = document.querySelector('span');
        input.addEventListener("blur", function () {
            if (regexp.test(input.value)) {
                span.style.color = 'green';
                span.innerHTML = "用户名合法";
            } else {
                span.style.color = 'red';
                span.innerHTML = "用户名不合法";
            }
        });
    </script>
</body>

七、预定义类

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

\d：匹配0-9之间任意一个数字，相当于[0-9]
\D：匹配除0-9之外任意字符，相当于[^0-9]
\w：匹配任意字母，数字和下划线，相当于[A-Za-z0-9_]
\W：匹配任意除字母，数字和下划线之外任意字符，相当于[^A-Za-z0-9_]
\s：匹配空格（换行符，制表符，空格符等），相当于[\t\r\n\v\f]
\S：匹配除空格之外任意字符，相当于[^\t\r\n\v\f]

八、正则替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式

stringObject.replace(regexp/substr, replacement)

正则表达式参数

**/表达式/[switch] **

switch 按照什么样的模式来匹配，有三种值。
g : 全局匹配
i ：忽略大小写
gi ：全局匹配，忽略大小写

<script>
    var text = '激情四射, 激情四射';
    var text1 = text.replace(/激情/, '**');
    console.log(text1);  // **四射, 激情四射
    var text2 = text.replace(/激情/g, '**');
    console.log(text2);  // **四射, **四射
</script>

这篇关于JavaScript进阶 - 正则表达式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！