JavaScript进阶 - 正则表达式

2021/7/12 20:08:10

本文主要是介绍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进阶 - 正则表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程