0
点赞
收藏
分享

微信扫一扫

04-前端技术_ 正则表达式

巧乐兹_d41f 2022-10-27 阅读 73
前端技术正则表达式Java开发工程师字符串搜索Linux系统/运维


目录

​​1，JS正则表达式简介​​

​​1.1 什么是正则表达式？​​

​​1.2 使用字符串方法​​

​​1.3 正则表达式修饰符​​

​​1.4 正则表达式模式​​

​​1.5 使用正则表达式的途径​​

​​2，JS正则表达式匹配与搜索​​

​​3，JS正则表达式语法​​

​​3.1 修饰符​​

​​3.2 方括号​​

​​3.3 元字符​​

​​3.4 量词​​

​​3.5 RegExp 对象属性​​

​​3.6 RegExp 对象方法​​

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

​​4，JS正则表达式替换与分割​​

​​5，JS正则表达式表单验证​​

 

1，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 正则表达式修饰符

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

修饰符

描述

i

执行对大小写不敏感的匹配。

​​试一试​​

g

执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

​​试一试​​

m

执行多行匹配。

​​试一试​​

 

1.4 正则表达式模式

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

表达式

描述

[abc]

查找方括号之间的任何字符。

​​试一试​​

[0-9]

查找任何从 0 至 9 的数字。

​​试一试​​

(x|y)

查找由 | 分隔的任何选项。

​​试一试​​

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

元字符

描述

\d

查找数字。

​​试一试​​

\s

查找空白字符。

​​试一试​​

\b

匹配单词边界。

​​试一试​​

\uxxxx

查找以十六进制数 xxxx 规定的 Unicode 字符。

​​试一试​​

Quantifiers 定义量词：

量词

描述

n+

匹配任何包含至少一个 n 的字符串。

​​试一试​​

n*

匹配任何包含零个或多个 n 的字符串。

​​试一试​​

n?

匹配任何包含零个或一个 n 的字符串。

​​试一试​​

1.5 使用正则表达式的途径

​​JavaScript RegExp 对象​​

一种是通过字符串调用方法，比如search、match、split、replace；

04-前端技术_ 正则表达式_搜索

另一种是通过正则表达式对象RegExp，调用compile、exec、test方法执行正则表达式；

04-前端技术_ 正则表达式_Java开发工程师_02

 

2，JS正则表达式匹配与搜索

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

04-前端技术_ 正则表达式_Java开发工程师_03

<!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>

3，JS正则表达式语法

3.1 修饰符

修饰符

描述

​​i​​

执行对大小写不敏感的匹配。

​​g​​

执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m

执行多行匹配。

3.2 方括号

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

表达式

描述

​​[abc]​​

查找方括号之间的任何字符。（a或b或c）

​​[^abc]​​

查找任何不在方括号之间的字符。

[0-9]

查找任何从 0 至 9 的数字。

[a-z]

查找任何从小写 a 到小写 z 的字符。

[A-Z]

查找任何从大写 A 到大写 Z 的字符。

[A-z]

查找任何从大写 A 到小写 z 的字符。

[adgk]

查找给定集合内的任何字符。

[^adgk]

查找给定集合外的任何字符。

(red|blue|green)

查找任何指定的选项。

04-前端技术_ 正则表达式_字符串_04

3.3 元字符

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

元字符

描述

​​.​​

查找单个字符，除了换行和行结束符。

​​\w​​

查找单词字符。

​​\W​​

查找非单词字符。

​​\d​​

查找数字。

​​\D​​

查找非数字字符。

​​\s​​

查找空白字符。

​​\S​​

查找非空白字符。

​​\b​​

匹配单词边界。

​​\B​​

匹配非单词边界。

\0

查找 NUL 字符。

​​\n​​

查找换行符。

\f

查找换页符。

\r

查找回车符。

\t

查找制表符。

\v

查找垂直制表符。

​​\xxx​​

查找以八进制数 xxx 规定的字符。

​​\xdd​​

查找以十六进制数 dd 规定的字符。

​​\uxxxx​​

查找以十六进制数 xxxx 规定的 Unicode 字符。

04-前端技术_ 正则表达式_正则表达式_05

04-前端技术_ 正则表达式_前端技术_06

 

3.4 量词

量词

描述

​​n+​​

匹配任何包含至少一个 n 的字符串。

​​n*​​

匹配任何包含零个或多个 n 的字符串。

​​n?​​

匹配任何包含零个或一个 n 的字符串。

​​n{X}​​

匹配包含 X 个 n 的序列的字符串。

​​n{X,Y}​​

匹配包含 X 至 Y 个 n 的序列的字符串。

​​n{X,}​​

匹配包含至少 X 个 n 的序列的字符串。

​​n$​​

匹配任何结尾为 n 的字符串。

​​^n​​

匹配任何开头为 n 的字符串。

​​?=n​​

匹配任何其后紧接指定字符串 n 的字符串。

​​?!n​​

匹配任何其后没有紧接指定字符串 n 的字符串。

^$搭配表示前后不能有其他字符 

04-前端技术_ 正则表达式_搜索_07

3.5 RegExp 对象属性

属性

描述

FF

IE

​​global​​

RegExp 对象是否具有标志 g。

1

4

​​ignoreCase​​

RegExp 对象是否具有标志 i。

1

4

​​lastIndex​​

一个整数，标示开始下一次匹配的字符位置。

1

4

​​multiline​​

RegExp 对象是否具有标志 m。

1

4

​​source​​

正则表达式的源文本。

1

4

3.6 RegExp 对象方法

方法

描述

FF

IE

​​compile​​

编译正则表达式。

1

4

​​exec​​

检索字符串中指定的值。返回找到的值，并确定其位置。

1

4

​​test​​

检索字符串中指定的值。返回 true 或 false。

1

4

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

方法

描述

FF

IE

​​search​​

检索与正则表达式相匹配的值。

1

4

​​match​​

找到一个或多个正则表达式的匹配。

1

4

​​replace​​

替换与正则表达式匹配的子串。

1

4

​​split​​

把字符串分割为字符串数组。

1

4

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

<!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>

 

4，JS正则表达式替换与分割

字符串分隔：

console.log(str.split(":")); //(6) ["23", "45", "67", "89", "87", "63"] 使用子串拆分

    str = "23:45;67:89!87#63";
    console.log(str.split(/[^0-9]/)); //(6) ["23", "45", "67", "89", "87", "63"] 使用正则拆分

 字符串匹配：（.表示任意字符； *表示任意数量；$1表示重复正则中第一个小括号中内容；.*是贪婪匹配（最大）； .*?是拒绝贪婪匹配（最小））

str = "23:45;67:89!87#63";
    //将上面子串中的分隔符统一替换成逗号，
    console.log(str.replace(/[^0-9]/g,",")); //23,45,67,89,87,63

    str = "<b>aaa</b><b>bb>b</b><b>ccc</b>";
    //将上面子串中的<b></b>标签替换成<i></i>   下面其中$1表示重复正则中第一个小括号中内容
    // .表示任意字符 *表示任意数量
    console.log(str.replace(/<b>(.*?)<\/b>/g,"<i>$1</i>")); //.*是贪婪匹配（最大） .*?是拒绝贪婪匹配（最小）

日期格式转换：

str = "04/28/2020"; //西方日期格式，请使用正则替换成中国的[年-月-日]格式
    console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$3-$1-$2"));
    //其中$1，$2 $3表示重复正则中第一、第二、第三个小括号中内容

 完整示例代码

<!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 = "23:45:67:89:87:63";
    console.log(str.split(":")); //(6) ["23", "45", "67", "89", "87", "63"] 使用子串拆分

    str = "23:45;67:89!87#63";
    console.log(str.split(/[^0-9]/)); //(6) ["23", "45", "67", "89", "87", "63"] 使用正则拆分


    str = "23:45;67:89!87#63";
    //将上面子串中的分隔符统一替换成逗号，
    console.log(str.replace(/[^0-9]/g,",")); //23,45,67,89,87,63

    str = "<b>aaa</b><b>bb>b</b><b>ccc</b>";
    //将上面子串中的<b></b>标签替换成<i></i>   下面其中$1表示重复正则中第一个小括号中内容
    // .表示任意字符 *表示任意数量
    console.log(str.replace(/<b>(.*?)<\/b>/g,"<i>$1</i>")); //.*是贪婪匹配（最大） .*?是拒绝贪婪匹配（最小）

    console.log("=========================================");

    str = "04/28/2020"; //西方日期格式，请使用正则替换成中国的[年-月-日]格式
    console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$3-$1-$2"));
    //其中$1，$2 $3表示重复正则中第一、第二、第三个小括号中内容
</script>
</html>

5，JS正则表达式表单验证

验证账号：

04-前端技术_ 正则表达式_正则表达式_08

验证邮箱：

04-前端技术_ 正则表达式_正则表达式_09

示例代码：

<!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>

章节汇总在这里（づ￣3￣）づ╭❤～​​@&再见萤火虫&【04-前端技术】​​

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

举报

相关推荐

任务卡_04-前端技术_正则表达式【表单验证】

前端技术正则表达式表单验证任务卡Java开发工程师云平台云计算

正则表达式—基础正则表达式

字符串正则表达式元字符Linux运维

04 - 慎重使用正则表达式

正则表达式性能优化性能调优

python语法--04正则表达式

pythonre

[正则表达式] 常用正则表达式总结

正则表达式字符串IPPython后端开发

正则表达式-正则表达式的使用

linuxbash运维

Java 正则表达式详解_正则表达式

2.2.2 java基础正则表达式搜索字符串Java编程语言

2021-04-23 正则表达式

正则表达式

前端常用正则表达式汇总

正则正则表达式下划线软件设计软件研发

正则表达式

正则表达式
0 条评论