正则表达式

最新推荐文章于 2024-07-23 04:03:13 发布
原创 最新推荐文章于 2024-07-23 04:03:13 发布 · 847 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端学习

当前文章被收录于：

前端学习
38 篇文章 1 人学习
订阅专栏 查看详情
JavaScript

当前文章被收录于：

JavaScript
18 篇文章 1 人学习
订阅专栏 查看详情
本文介绍了正则表达式在前端开发中的重要性，详细讲解了正则表达式的语法、创建方式以及相关方法，包括字符串方法和正则方法。内容涵盖了字符集、修饰符、边界、预定义类、量词、分组与或操作符，以及分组的反向引用。通过实例演示如何使用正则表达式进行字符串匹配、分割、替换等操作，特别强调了在处理中文匹配上的应用。

文章目录

前言

在前端中学习正则表达式是非常有必要的，在实际开发中会经常使用正则表达式。
正则表达式:（Regular Expression)用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

一、正则表达式

正则表达式的作用：
1.给定的字符串是否符合正则表达式的过滤逻辑(匹配)
2.可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
3.强大的字符串替换能力(替换)

正则表达式语法

可以通过两种方式创建正则表达式：
（1）通过字面量的方式创建正则表达式 /abc/
（2）通过构造函数创建正则表达式 new RegExp(“abc”)
注意：通常使用字面量的方式创建正则表达式
接下来通过代码来体会创建正则表达式

    <script>
        //字面量创建正则表达式
        var reg = /abc/;
        //构造函数创建正则表达式
        var reg1 = new RegExp("abc");
    </script>

二、相关正则方法

1.字符串方法

（1）split：根据匹配的字符串分割父字符串
（2）search：使用正则表达式搜索字符串所在位置，并返回下标。
（3）match：使用正则表达式跟字符串作比较，返回一个包含匹配结果的数组。
（4）replace：使用正则表达式替换字符串，返回替换后的整个字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //splice 方法： 分隔所匹配的指定字符串
        var str = "aa bbb    c dd eeeeee";
        var arr = str.split(/\s+/);
        console.log(arr);
        var str1 = "bbaacaaaadddaeeeeeaaf";
        var arr1 = str1.split(/a+/);
        console.log(arr1);

        //search 方法： 根据正则表达式找到字符串，并返回下标位置
        var str = "abcdefg";
        var a = str.search("cd");
        var b = str.search(/cdf/);
        console.log(a);
        console.log(b);

        //match 方法： 根据正则表达式匹配字符，返回一个包含匹配字符的数组
        var str = "abbcccbbbbbddbbbdabbb";
        var arr = str.match(/b+/);
        console.log(arr);
        var arr1 = str.match(/b+/g);
        console.log(arr1);
        var str1 = "aaaa o  o bbb o     o  aaa";
        var arr2 = str1.match(/o\s+o/g);
        console.log(arr2);

        //replace 方法： 根据正则替换字符
        var str = "www.baidu.com";
        var str1 = str.replace(/baidu/,"hello");
        console.log(str1);
    </script>
</body>
</html>

2.正则方法

（1）exec：在目标字符串中执行一次
（2）test：测试当前正则是否能匹配目标字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //exec 方法：返回目标字符串第一次出现的位置
        //无论有没有全局修饰符，都只会找到第一次出现的位置
        var str = /abc/;
        console.log(str.exec("aaaabccccbacabc"));

        //test 方法： 返回是否包含在字符串内，包含返回true ，不包含返回false
        console.log(str.test("aaaabccccbacabc"));
    </script>
</body>
</html>

三、正则表达式的组成

由普通字符和特殊字符组成（元字符），普通字符包括大小写字母和数字，特殊字符是() [] {} * ^ $符号等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //普通字符
        var reg = /abc/;
        console.log(reg.test("afhgfhabchhtd"));

        //特殊字符
        var a = /a\*/;
        console.log(a.test("rfsh*ssag"));
        var reg1 = /\n/;
        var str = `afgftexdxv
        adsdgfkukuyu`;
        console.log(reg1.test(str));
    </script>
</body>
</html>

1.字符集

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //字符集 在[]内的字符  只要有一个符合就可以匹配
        //简单类：简单的字符串在字符集内
        var reg = /[abc]/;
        console.log(reg.test("hhbkk"));

        //范围类：在一定范围内的字符集，只要有一个在范围内的字符就可以匹配 0-9 A-Z a-z
        var reg1 = /[0-9]/;
        console.log(reg1.test("sakhfjd"));

        //负向类：只要不是字符集中的字符出现，就可以匹配成功
        var reg2 = /[^a-z]/;
        console.log(reg2.test("adsfdfgd3"));

        //组合类： 上面类的组合，只要出现一个字符符合就匹配成功
        //特殊情况： 可以进行缩写，但是必须按照0-9 A-Z a-z 这个顺序的字符集才可以进行缩写，否则不可以进行缩写
        var reg3 = /[0-9a-z]/;
        var reg4 = /[0-z]/;
        console.log(reg3.test("afssdgh"));
        console.log(reg4.test("A"));
        

    </script>
</body>
</html>

2.修饰符

g修饰符：可以实现全局查找
i修饰符：可以实现对于字母的大小写不敏感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //修饰符：g    i
        //g修饰符 ： 可以实现全局查找
        var reg = /a+/g;
        var str = "hhgokfaaawegdgaa";
        console.log(str.match(reg));

        //i修饰符 ： 字母大小写不敏感
        var str1 = "egfhljsadgaaaaahaa";
        var reg1 = /A+/ig;
        console.log(str1.match(reg1));
    </script>
</body>
</html>

3.边界

^边界符号，限制字符串的开头，此符号后面的字符串必须在匹配的字符串开头。
$边界符号，限制字符串的结尾，此符号前面的字符串必须在匹配的字符串的结尾。
两种边界符号可以同时限制，既限制开头又限制结尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //边界符号
        //^边界符号：限制开头
        var str = "hello javascript";
        console.log(/^hello/.test(str));
        console.log(/^helllo/.test(str));
        //$边界符号：限制结尾
        console.log(/script$/.test(str));
        console.log(/helllo$/.test(str));
        //两种边界都限制，既限制开头又限制结尾
        console.log(/^hello\s+javascript$/.test(str));
    </script>
</body>
</html>

4.预定义类

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //非回车非换行
        console.log(/^.+$/.test("assfdgfhgh"));
        console.log(/^.+$/.test(`csdks
        dhfgjg`));

        //\d 数字字符 \D非数字字符
        console.log(/^\d+$/.test("121314546"));
        console.log(/^\d+$/.test("12224v23"));
        console.log(/^\D+$/.test("SFSFDFGJ"));
        console.log(/^\D+$/.test("DSDSF4FD"));

        //\s 空白字符 \S非空白字符
        console.log(/^\s+$/.test("      "));
        console.log(/^\S+$/.test("1222 4v23"));

        //\w 单词字符 \W非单词字符
        console.log(/^\w+$/.test("1213145sfdg_46"));
        console.log(/^\W+$/.test("*&8"));
    </script>
</body>
</html>

5.量词

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //{n} 硬性量词  只能连续出现n次
        var reg = /^\d{5}$/;
        console.log(reg.test("12345"));
        console.log(reg.test("1234"));
        console.log(reg.test("123456"));

        //{n,m} 软性量词  出现在n到m之间就可以，但是不能小于n不能大于m
        var reg = /^\d{6,8}$/;
        console.log(reg.test("12345"));
        console.log(reg.test("123456"));
        console.log(reg.test("1234567"));
        console.log(reg.test("123456789"));

        //{n,} 软性量词  至少出现n次，可以大于n但不能小于n
        var reg = /^\d{6,}$/;
        console.log(reg.test("12345"));
        console.log(reg.test("123456"));
        console.log(reg.test("1234567"));

        //？ 相当于{0,1} 软性量词  只能出现0次或者一次
        var reg = /^\d?$/;
        console.log(reg.test("1"));
        console.log(reg.test(""));
        console.log(reg.test("123456"));

        //* 相当于{0,1} 软性量词  可以出现零次或者任意次
        var reg = /^\d*$/;
        console.log(reg.test("1"));
        console.log(reg.test(""));
        console.log(reg.test("123456"));

        //+ 相当于{0,1} 软性量词  至少出现一次
        var reg = /^\d+$/;
        console.log(reg.test("1"));
        console.log(reg.test(""));
        console.log(reg.test("123456"));
    </script>
</body>
</html>

6.分组、或操作符

用（）小括号来进行分组，将括号中的内容作为一个整体出现进行匹配。
|或操作符可以进行选择匹配，只要满足|符号两边的任意一个就可以，通常与（）进行搭配使用。
下面看代码，体会分组和或操作符

    <script>
        //分组 （）
        var reg = /^(bye){2}$/;
        console.log(reg.test("byebye"));
        console.log(reg.test("bye"));
    </script>

    <script>
        //或操作符 | 
        //不与（）搭配使用时，表示要么以ab开头，要么以cd结尾
        var reg = /^ab|cd$/;
        console.log(reg.test("abfgdh"));
        console.log(reg.test("fgdh"));
        console.log(reg.test("gdhcd"));

        //与（）搭配使用时，表示括号内的作为一个整体，要么以ab作为开头和结尾，要么以cd作为开头和结尾。
        var reg = /^(ab|cd)$/;
        console.log(reg.test("ab"));
        console.log(reg.test("abcd"));
        console.log(reg.test("cd"));
    </script>

7.分组的反向引用

分组（）里的内容可以进行编号，从1开始编号，将编号的内容进行引用。
在正则表达式内引用：\1
在正则表达式外引用：$1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //分组（）可以进行编号，从序号1开始进行编号
        //在正则表达式中进行编号引用 \1
        console.log(/^(bye)\1$/.test("byebye"));
        console.log(/^(bye)\1$/.test("byelie"));
        //在外面进行引用 $1
        var str = "123*456";
        console.log(str.replace(/^([0-9]{3})\*([0-9]{3})$/,"$2*$1"));
        //第二个参数也可以用函数来表示
        str = str.replace(/^([0-9]{3})\*([0-9]{3})$/,function (match,$1,$2) {
            return $1 * 3 + "/" + $2 * 2;
        });
        console.log(str);
    </script>
</body>
</html>

8.中文匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //中文匹配 \u4e00-\u9fa5
        console.log(/^[\u4e00-\u9fa5]+$/.test("智能"));
        console.log(/^[\u4e00-\u9fa5]+$/.test("智能phone"));
    </script>
</body>
</html>

总结

正则表达式就学习到这里啦，后期使用正则表达式可以通过上面学习的字符集等灵活运用。每天坚持学习前端~
在这里插入图片描述

标签
#正则表达式 #js
正则及python正则
谁家的喵
04-03 1677
正则表达式（regular expression）描述了一种字符串匹配的模式（pattern），可以用来检查一个字符串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。 字符 描述 * 匹配前面的子表达式零次或多次。例如，zo* 能匹配＂z＂ 以及＂zoO＂。*等价于｛0，｝。 * test* #.*表示任意匹配除换行符(\n、\r)之外的任何单个或多个字符 #(.*？)表示“非贪婪”模式，只保存第
java正则化，返回同一字符串多处匹配结果。
weixin_44319196的博客
10-20 1585
1、需求： 正则化匹配时，正则表达式pattern，需要匹配字符传string中的多处，并将没一处的位置信息返回！ 2、代码： import java.util.ArrayList; import java.util.HashMap; import java.util.regex.Matcher; import java.util.regex.Pattern; public class test { public static void main(String[] args) {
python截取字符串中特定部分_python 正则表达式如何截取字符串中间的内容
weixin_39660922的博客
11-26 2168
展开全部是需要从字符串中提取数2113字吗如图所示：正则表5261达式4102是一个特殊的字符序列，它能帮助你方便的检1653查一个字符串是否与某种模式匹配。Python 自1.5版本起增加了re 模块，它提供 Perl 风格的正则表达式模式。re 模块使 Python 语言拥有全部的正则表达式功能。compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象。该对象拥有一系列方法...
正则表达式使用之位置匹配
Hohxill的博客
03-01 3853
正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。 然而大部分人学习正则时，对于匹配位置的重视程度没有那么高。 本章讲讲正则匹配位置的相关知识点。 内容包括： 什么是位置？ 如何匹配位置？ 位置的特性 几个应用实例分析 1|0什么是位置呢？ 位置（锚）是相邻字符之间的位置。比如，下图中箭头所指的地方： 2|0如何匹配位置呢？ ^、$、\b、\B、(?=p)、(?!p) 相应的可视化形式是： 2|1^ 和 $ ^（脱字符）匹配开头，在多行匹配中匹配行开头。 $
Python_正则表达式提取字符串
热门推荐
檬柠wan
11-04 1万+
1、指定位置字符串提取 如果要提取指定位置的话，我们可以使用 （.+?）这个正则表达式来提取。举例：一个字符串“a123456789b”,如果我们想提取ab之间的数字，可以使用 findall 配合正则表达式,会返回list。 import re String = "a123456789b" regular = re.findall(r"a(.+?)b", String) print(regular) print(regular[0]) 结果： ['123456789'] 123456789 2、贪婪
正则表达式（9）：扩展正则表达式
qq_40531442的博客
12-10 2065
上图中的扩展正则使用了分组符号”( )”，”(com|net)”表示将括号内的内容看做一个整体，而括号内的内容为”com|net”，它表示”com或者net”，所以，”(com|net)$”就表示以com或者net结尾的行。上图中，grep命令使用了”-E”选项，表示grep命令会把”正则表达式”中的符号当成”扩展正则表达式”去理解，而不再使用默认的”基本正则表达式”。5、顶级域名之前必须包含一个”点”，换句话说就是，邮箱必须以”.com”、”.net”、”.org”、”.edu”结尾。
Python正则表达式
最新发布
2301_81704383的博客
07-23 1237
正则表达式是对字符串提取的一套规则，我们把这个规则用正则里面的特定语法表达出来，去匹配满足这个规则的字符串。正则表达式具有通用型，不仅python里面可以用，其他的语言也一样适用。正则表达式是一个特殊的字符序列，它能帮助你方便的检查一个字符串是否与某种模式匹配，常用的有都可以用于匹配字符串。
linux正则表达式，正则表达式分类，元字符，基础正则表达式，扩展正则表达式，正则表达式案例
有人说学习`这个`最好的时间是十年前，有人说最好的时间是现在，众说纷纭...
07-06 1750
上文介绍了通配符1，本文介绍、总结和通配符有着诸多共同点的一类符号，即正则表达式（regular expression）。只是通配符的对象是文件、或目录，而后者对象是文本内容。在很多地方都有正则表达式的身影，它的作用是用来匹配指定式样的内容，个人理解为，正则表达式规定了指定式样pattern，能匹配该指定式样的字符或字符串即为内容，内容的来源可以是文件、某个标准输入等，使用正则表达式（regular expression）的目的就是匹配到了该内容。
linux正则表达式大全,正则表达式，正则表达式语法大全
weixin_32955259的博客
05-14 2845
正则表达式，正则表达式语法大全正则表达式分为两类：基本正则表达式：BRE扩展正则表达式：ERE基本正则表达式的元字符：字符匹配：.： 匹配任意单个字符；[]： 匹配指定范围内的任意单个字符[^]：匹配指定范围外的任意单个字符[:digit:],[:upper:],[:lower:],[:alpha:],[:alnum:],[:space:],[:punct:]匹配次数：用在要指定次数的字符后面，...
shell 正则表达式详解
weixin_48814356的博客
02-05 2962
什么是正则表达式；为什么使用正则表达式；如何使用正则表达式；基本正则表达式；扩展正则表达式； 包含正则表达式例题。
regex 正则表达式
weixin_40118971的博客
02-23 6451
regex 正则表达式 文章目录regex 正则表达式前言元字符abc 等普通字符| 符号两侧的正则均能匹配. 匹配任意一个字符 '\n'除外^ 匹配字符串开头$ 匹配字符串结尾* 匹配重复0次或多次+ 匹配重复1次或多次? 匹配重复0次或1次{N} 匹配重复指定次数{M,N} 匹配重复指定次数范围[abcd] 字符集匹配[^ ...] 字符集不匹配\d 匹配任意数字字符\D 匹配任意非数字字...
【正则表达式】{1} ——正则表达式的语法
Giyn
02-29 4678
参考资料：Python网络爬虫与信息提取（北京理工大学慕课） 正则表达式的语法： 正则表达式语法由字符和操作符构成 正则表达式的常用操作符： 操作符 说明 实例 . 表示任何单个字符 [ ] 字符集，对单个字符给出取值范围 [abc]表示a、b、c，[a-z]表示a到z单个字符 [^ ] 非字符集，对单个字符给出排除范围 [^abc]表示非a或b或c的单个字符 ...
正则表达式总结
lmb55的专栏
09-06 2214
每次使用到正则表达式的时候都要去翻书或者去网上查，很麻烦，抽出点时间做一个总结，方便以后用到的时候查阅。一、正则表达式的几个特殊符号1、^和$两个特殊的符号‘^’和’$’。他们的作用是分别指出一个字符串的开始和结束。例子如下："^The"：表示所有以"The"开始的字符串（"There"，"The cat"等）； "of despair$"：表示所以以"of despair"结尾的字符串； "^ab
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值