JavaScript 正则表达式

最新推荐文章于 2023-10-14 22:05:15 发布

苦涩2020

最新推荐文章于 2023-10-14 22:05:15 发布

阅读量166

点赞数

分类专栏： JavaScript 前端文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/UserPython/article/details/105537731

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

JavaScript 正则表达式

正则表达式简介
字符串常用操作方法
正则表达式语法
RegExp对象属性和方法
- RegExp对象属性
- RegExp对象方法

正则表达式简介

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具
正则表达式简洁且功能强大，通常用来匹配字符串，比如在表单验证中检验用户输入是否合法。它并不仅仅在JavaScript中可以使用，众多的高级编程语言都支持正则表达式

字符串常用操作方法

search()：方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的字符串
该参数可以是需要在stringObject中检索的子串，也可以是需要检索的RegExp对象
match()：方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
该方法类似indexOf()和lastIndexOf()，但是它返回指定的值，而不是字符串的位置
replace()：方法用于在字符串中用一些字符串替换另一些字符，或替换一个与正则表达式匹配的子串
split()：方法用于把一个字符串分割成字符串数组

		var string = "HTML5 CSS JavaScript JSON";
        document.write(string.search("ML") + "<br>");//返回下标值，如果找不到返回-1
        document.write(string.match("ML") + "<br>");//返回该值，如果找不打返回null
        document.write(string.replace("TML", "tml") + "<br>");//返回替换后的字符串
        document.write(string + "<br>");//原字符串不变
        document.write(string.split(" ", 2));//指定字符分割成数组，后面参数指定数组个数

正则表达式语法

创建正则表达式的两种方法

方法一：new RegExp(pattern, attributes);
方法二：/pattern/attributes/
参数：
pattern：是一个字符串，制定了正则表达式的模式或其他正则表达式
attributes：是一个可选字符串，包含属性“g”，“i”，分别用于指定全局匹配、区分大小写的匹配
返回值：一个新的RegExp对象，具有指定的模式和标志

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的语法</title>
</head>
<body>
    <script>
        /*
        var reg1 = new RegExp("a", "g");
        var reg2 = /a/g;
        alert(reg1 + "\n" + reg2);
        */

        var str = "Html5 hTml5 htMl5 htmL5 html5";
        var reg = /html5/;
        var reg_i = /HTML5/i;//对大小写不敏感
        var reg_g = /html5/g;//执行全局匹配
        var reg_ig = /html5/ig;//对大小写不敏感且全局匹配
        document.write("str: " + str + "<br>");

        document.write("search: " + str.search("html5") + "<br>");//24
        document.write("search: " + str.search(reg) + "<br>");//24
        document.write("search: " + str.search(reg_i) + "<br>");//0，忽略大小写，第一个符合

        document.write("match html5: " + str.match("html5") + "<br>");//html5
        document.write("match reg: " + str.match(reg) + "<br>");//html5
        document.write("match reg_i: " + str.match(reg_i) + "<br>");//Html5,忽略大小写，第一个符合
        document.write("match reg_g: " + str.match(reg_g) + "<br>");//html5
        document.write("match reg_ig: " + str.match(reg_ig) + "<br>");//Html5 hTml5 htMl5 htmL5 html5

        document.write("replace reg: " + str.replace(reg, "HTML5") + "<br>");//Html5 hTml5 htMl5 htmL5 HTML5
        document.write("replace reg_ig: " + str.replace(reg_ig, "HTML5") + "<br>");//HTML5 HTML5 HTML5 HTML5 HTML5
    </script>
</body>
</html>

方括号

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

表达式	描述
[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符
[0-9]	查找任何从0至9的数字
[a-z]	查找任何从小写a到小写z的字符
[A-Z]	查找任何从大写A到大写Z的字符
[A-z]	查找任何从大写A到小写z的字符
[adgk]	查找给定集合内的任何字符
[^adgk]	查找给定集合外的任何字符
(red \| blue \| green)	查找任何指定的选项，如果没有设置全局匹配，找到一个就终止查找

字符

元字符是拥有特殊含义的字符

元字符	描述
.	查找单个字符，除了换行符和行结束符外的任意字符
\	转义字符
\w	查找单词字符（包括英文字母，数字，下划线）
\W	查找非单词字符（包括非英文字母，数字，下划线之外的字符）
\d	查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符
\b	匹配单词边界
\B	匹配非单词边界
\0	查找NULL字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找八进制数 xxx规定的字符
\xdd	查找十六进制数 dd规定的字符

<script>
        var str = "img*jpg img&jpg img jpg img.jpg img+jpg";
        var str2 = "我的邮箱是: _OliGit@163.com";

        var reg = /img.jpg/g;//.：会匹配除换行符合结束符外任意字符
        var reg2 = /img\.jpg/g;//可以使用转义字符\
        var reg_w = /\w/g;//英文、数字、下划线
        var reg_W = /\W/g;//和上面相反
        var reg_d = /\d/g;//匹配数字
        var reg_D = /\D/g;//非数字
        var reg_s = /\s/g;//空白字符
        var reg_S = /\S/g;//非空白字符

        document.write(str.match(reg) + "<br>");
        document.write(str.match(reg2) + "<br>");

        document.write(str2.match(reg_w) + "<br>");
        document.write(str2.match(reg_W) + "<br>");
        document.write(str2.match(reg_d) + "<br>");
        document.write(str2.match(reg_D) + "<br>");
        document.write(str2.match(reg_s) + "<br>");
        document.write(str2.match(reg_S) + "<br>");
    </script>

量词

量词	描述
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的字符串

    <script>
        var str1 = "12 098, 234, 2, 34, 900, 23 77";
        var str2 = "HTML5 Css3 javascript JOSN";
        var str3 = "Gd God Good Goood GGGod GoGoGod";
        var str4 = "13cm 15cm 100cm 180cm 230 56";

        var reg1 = /\d+/g;//匹配任何包含至少一个字符串，
        var reg2 = /\w+/g;
        var reg3 = /Go+d/g;//字母o至少得有一个
        var reg4 = /Go*d/g;//字母o可以0次或多个
        var reg5 = /Go?d/g;//字母o为0个或1个
        var reg6 = /Go{2}d/g;//指定匹配字母为多少个
        var reg7 = /\d{2}/g;//匹配包含2个数字
        var reg8 = /\d{2,3}/g;//匹配2至3个数字
        var reg9 = /\d{2,}/g;//匹配至少包含2个数字
        var reg10 = /77$/g;//匹配字符串末尾为77的字符串
        var reg11 = /^12 09/g;//匹配字符串开头为12 09的字符串
        var reg12 = /\d+(?=cm)/g;//匹配其后紧接cm的字符串
        var reg13 = /\d+(?!cm)/g;//匹配其后没有紧接cm的字符串(接近cm的不匹配)

        document.write(str1.match(reg1) + "<br>");
        document.write(str2.match(reg2) + "<br>");
        document.write(str3.match(reg3) + "<br>");
        document.write(str3.match(reg4) + "<br>");
        document.write(str3.match(reg5) + "<br>");
        document.write(str3.match(reg6) + "<br>");
        document.write(str1.match(reg7) + "<br>");
        document.write(str1.match(reg8) + "<br>");
        document.write(str1.match(reg9) + "<br>");
        document.write(str1.match(reg10) + "<br>");
        document.write(str1.match(reg11) + "<br>");
        document.write(str4.match(reg12) + "<br>");
        document.write(str4.match(reg13) + "<br>");
    </script>

分组和多行匹配

<script>
        // 分组匹配
        var str1 = 'td tdd tddd tdddd tdtd tdtdtd tdtdtdtd'; 
        var reg1 = /td{2,4}/g;//只匹配d{2,4}而已
        var reg2 = /(td){2,4}/g;//分组匹配，同时匹配td
        document.write(str1.match(reg1) + "<br>");
        document.write(str1.match(reg2) + "<br>");

        //多行匹配
        var str2 = "1、第一章\n2、第二章\n3、第三章";
        // alert(str2);//换行效果
        var reg3 = /^\d/g;//只能单行匹配到一个
        var reg4 = /^\d/gm;//多行匹配
        document.write(str2.match(reg3) + "<br>");
        document.write(str2.match(reg4) + "<br>");
    </script>

RegExp对象属性和方法

RegExp对象属性

global：RegExp对象是否具有标志g；如果设置了标志g，则该属性为true，否则为false
语法：RegExpObject.global
ignoreCase：RegExp对象是否具有标志i；如果设置了标志i，则该属性为true，否则为false
语法：RegExpObject.ignoreCase
multiline：RegExp对象是否具有标志m；如果设置了标识m，则该属性为true，否则为false
语法：RegExpObject.multiline
source：正则表达式的源文本；用于返回模式匹配所用的文本；该文本不包括正则表达式直接使用的定界符，也不包括标志符g，i，m
语法：RegExpObject.source
lastIndex：返回一个整数，标示开始下一次匹配的字符位置；该属性存放一个整数，它声明的是上一次匹配文本之后的第一个字符的位置。多用于在一个字符串中进行多次匹配
语法：RegExpObject.lastIndex

上一次匹配的结果是由方法RegExpObject.exec()和RegExp.test()找到的，它们都以lastIndex属性所指的位置作为下次检索的起始点。这样，就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本；不具有标志g和不表示全局模式的RegExp对象不能使用lastIndex属性

    <script>
        var str = "javascript1javascript2javascript3";
        var reg = /javas/ig;
        document.write(reg.global + "<br>");
        document.write(reg.ignoreCase + "<br>");
        document.write(reg.multiline + "<br>");
        document.write(reg.source + "<br>");

        document.write("第一个匹配位置：" + reg.lastIndex + "<br>");
        document.write(reg.test(str) + "<br>");
        document.write("第二次匹配位置：" + reg.lastIndex + "<br>");
        document.write(reg.test(str) + "<br>");
        document.write("下一次匹配位置：" + reg.lastIndex + "<br>");
        document.write(reg.test(str) + "<br>");
    </script>

RegExp对象方法

compile：编译正则表达式；该方法将正则表达式转换为内部的格式，从而执行的更快。例如，这允许在循环中更有效地使用正则表达式。当重复使用相同的表达式时，编译过的正则表达式使执行加速
test：检索字符串中指定的值。返回true或false；如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false
语法：RegExpObject.test(string)
exec：检索字符串中指定的值，返回找到的值，并确定其位置

如果exec方法没有找到匹配，将返回null，如果找到匹配项，则返回一个数组

数组元素0包含了完整的匹配项，而元素1到n包含的是匹配项中出现的任意一个子匹配项（子表达式）

除了数组元素和length属性之外，exec方法还返回两个属性：index属性声明的是匹配项文本的第一个字符的位置。input属性则存放的是被检索的字符串string。在调用非全局的RegExp对象的exec()方法时且无子匹配项，返回的数组与调用方法String.match()返回的数组是相同的

当RegExpObject是一个全局正则表达式时，exec会在RegExpObject的lastIndex属性指定的字符处开始检索字符串string。当exec找到了与表达式相匹配的文本时，在匹配后，它将把RegExpObject的lastIndex属性设置为匹配文本的最后一个字符的下一个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp对象方法</title>
</head>
<body>
    <script>
        //test
        var str = '12html5 javascript css3 json';
        var reg = /css/g;
        
        document.write(str.search(reg) + "<br>");
        document.write(reg.test(str) + "<br>");

        // compile
        var str2 = "13239876543 13809865876";
        // var reg2 = /13[4-9][0-9]{8}/g;
        var reg2 = new RegExp();
        
        reg2.compile("13[4-9][0-9]{8}", "g");
        document.write(str2.match(reg2) + "<hr>");

        //exec与match的区别
        //1、exec是正则表达式的方法，而不是字符串的方法，exec的参数是字符串
        //2、当正则表达式无子表达式时，并且定义为非全局匹配时，exec和match执行的结果
        //   是一样的，均返回第一个匹配的字符串内容
        //3、当正则表达式无子表达式时，并且定义为全局匹配时，exec和match执行，
        //   做存在多处匹配内容，而match返回的是多个元素的数组
        //4、当正则表达式有子表达式时，并且定义为全局匹配，exec和match执行
        //   结果不一样，此时match将忽略子表达式，值查找全局匹配正则表达式，并返回所有内容
        //5、当正则表达式有子表达式时，并且定义为非全局匹配，exec和match执行结果是一样的
        //6、当正则表达式有子表达式时，exec与全局匹配是由定义无关系，而match则与全局匹配相关联
        //   当定义为非全局匹配时，两者执行结果相同
        var str5 = "css3 HTML5 css5";
        var reg5 = /[a-z]+\d/;//无子表达式
        var reg6 = /([a-z]+)\d/g;//有子表达式，由圆括号包括的就是子表达式
        var reg7 = /([a-z]+)\d/;//有子表达式，无全局匹配
        document.write(str5.match(reg5) + "<br>");
        document.write(reg5.exec(str5) + "<hr>");

        document.write(str5.match(reg6) + "<br>");
        document.write(reg6.exec(str5) + "<hr>");

        document.write(str5.match(reg7) + "<br>");
        document.write(reg7.exec(str5) + "<hr>");

        document.write(reg7.exec(str5).index + "<br>");
        document.write(reg7.exec(str5).input + "<br>");
    </script>
</body>
</html>

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 正则表达式

JavaScript 正则表达式正则表达式简介字符串常用操作方法正则表达式语法创建正则表达式的两种方法正则表达式简介RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具正则表达式简洁且功能强大，通常用来匹配字符串，比如在表单验证中检验用户输入是否合法。它并不仅仅在JavaScript中可以使用，众多的高级编程语言都支持正则表达式字符串常用操作方法search(...
复制链接

扫一扫