正则表达式

最新推荐文章于 2025-01-15 13:48:40 发布

原创最新推荐文章于 2025-01-15 13:48:40 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式

Java 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了JavaScript中的正则表达式，包括其基本概念、使用方法、修饰符、模式、元字符和量词等。通过实例展示了如何进行匹配、搜索、替换和分割操作，并探讨了在表单验证中的应用。此外，还提供了邮箱和账号验证的正则表达式示例。

一、JS正则表达式简介

JavaScript 正则表达式
以下主要内容来自W3school教程

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

1.1 什么是正则表达式？

正则表达式是构成搜索模式（search pattern）的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

语法

/pattern/modifiers;

实例

var patt = /w3school/i;

例子解释：

/w3school/i 是一个正则表达式。

w3school 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。

1.2 使用字符串方法

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

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

replace() 方法返回模式被替换处修改后的字符串。

在字符串方法 search() 中使用正则表达式

实例

使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索：

var str = "Visit W3School";
var n = str.search(/w3school/i);

n 中的结果将是： 6

在字符串方法 replace() 中使用正则表达式

实例

使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft：

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");

res 的结果将是：

Visit W3School!

1.3 正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

在这里插入图片描述

1.4 正则表达式模式

括号用于查找一定范围的字符串：

在这里插入图片描述
元字符（Metacharacter）是拥有特殊含义的字符：

在这里插入图片描述

Quantifiers 定义量词：
在这里插入图片描述

1.5 使用正则表达式的途径

JavaScript RegExp 对象

二、JS正则表达式匹配与搜索

举例：通过两种途径，实现字符串匹配、搜索。实现多个模式测试

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式</h1>
</body>
<script>
    //正则的使用
    var str = "wert45678yuiytrew";
    //使用正则匹配子串str中的数字
    console.log(str.match(/[0-9]+/));
 
    //使用RegExp创建一个正则对象
    var pat = new RegExp("[0-9]+");
    console.log(str.match(pat));
    console.log(pat.exec(str));
    //以上三个返回结果一致：["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]
 
    console.log("==============================");
 
    //正则搜索
    console.log(str.search(/[0-9]+/)); //4 返回首次匹配位置 ，没有返回-1
    console.log(str.search(pat)); //4 返回首次匹配位置 ，没有返回-1
    console.log(pat.test(str)); //true 返回是否匹配
 
    //匹配多个
    console.log("==============================");
    var str = "wert45678yui456ytr678ew";
 
    console.log(str.match(/[0-9]+/)); //默认只匹配一次
    console.log(str.match(/[0-9]+/g)); //(3) ["45678", "456", "678"] 使用g修饰符 匹配所有
 
 
</script>
</html>

三、JS正则表达式语法

3.1 修饰符

在这里插入图片描述

3.2 方括号

方括号用于查找某个范围内的字符：

在这里插入图片描述

3.3 元字符

元字符（Metacharacter）是拥有特殊含义的字符：

在这里插入图片描述

3.4 量词

在这里插入图片描述
^$搭配表示前后不能有其他字符

在这里插入图片描述

3.5 RegExp 对象属性

在这里插入图片描述

3.6 RegExp 对象方法

在这里插入图片描述

3.7 支持正则表达式的 String 对象的方法

在这里插入图片描述

举例：列举常用的正则表达式方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式</h1>
</body>
<script>
    //正则的使用
    var str = "wer245ty4d56fg78hj987k";
    //使用正则匹配子串str中的数字
    //console.log(str.match(/[0-9]/g)); //匹配任意一位数字
    //console.log(str.match(/[0-9][0-9]/g)); //匹配任意两位数字
    //console.log(str.match(/[0-9]{2}/g)); //匹配任意两位数字
    //console.log(str.match(/[0-9][0-9][0-9]/g)); //匹配任意三位数字
    //console.log(str.match(/[0-9]{3}/g)); //匹配任意三位数字
    //console.log(str.match(/[0-9]{2,3}/g)); //匹配任意两位或三位数字
    //console.log(str.match(/\d{2,3}/g)); //匹配任意两位或三位数字
    
    console.log(str.match(/\d+/g)); //匹配至少一位数字
    console.log(str.match(/\d{1,}/g)); //匹配至少一位数字
    console.log(str.match(/[0-9]{1,}/g)); //匹配至少一位数字
 
    // \d{1,}  [0-9]{1,}  \d+  [0-9]+ 都表示至少一位的数字
 
    //精确匹配
    var pat = new RegExp("[0-9]+");// 至少一位数字
    console.log(pat.test("er2567thj")); //true 匹配子串中是否含有数字
 
    var pat = new RegExp("^[0-9]+");
    console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字开头
    console.log(pat.test("2567thj"));   //true 匹配子串中是否是以数字开头
 
    var pat = new RegExp("[0-9]+$");
    console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字结尾
    console.log(pat.test("wer2567"));   //true 匹配子串中是否是以数字结尾
 
    var pat = new RegExp("^[0-9]+$");
    console.log(pat.test("2567thj"));   //false 匹配子串中是否是纯数字
    console.log(pat.test("wer2567"));   //false 匹配子串中是否是纯数字
    console.log(pat.test("2567"));   //true 匹配子串中是否是纯数字
 
    var pat2 = new RegExp("^[0-9]{6}$"); //精确匹配任意6位数字
</script>
</html>

四、JS正则表达式替换与分割

字符串分隔：

五、JS正则表达式表单验证

验证账号：

在这里插入图片描述

验证邮箱：
在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式在表单验证中的实例</h1>
    <form action="js03.html" name="myform" onsubmit="return doSubmit()" method="post">
        <!-- onblur失去鼠标焦点事件 -->
        账号：<input type="text" name="uname" onblur="checkUname()" /><br/><br/>
        邮箱：<input type="text" name="email" onblur="checkEmail()"/><br/><br/>
        <input type="submit" value="提交"/>
    </form>
</body>
<script>
    //验证账号函数
    function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        //if(uname.match(/^[0-9A-Za-z_]{8,16}$/) == null){
        // \w相当于字母、数字、下划线
        if(uname.match(/^\w{8,16}$/) == null){
            alert("请输入8~16位的账号信息！");
            return false;
        }
        return true;
    }
 
    //验证邮箱函数
    function checkEmail(){
        //获取账号信息
        var email = document.myform.email.value;
        //执行验证
        if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息！");
            return false;
        }
        return true;
    }
 
    //表单提交
    function doSubmit(){
        return checkUname() && checkEmail();
    }
</script>
</html>