JS正则02——js正则表达式中常用的方法、常见修饰符的使用详解以及各种方法使用情况示例
- 1. 前言
- 1.1 简介
- 1.2 js正则特殊字符即使用示例
- 2. 创建正则表达式的方式
- 2.1 两种创建正则表达式的方式
- 2.2 关于修饰符
- 3. 正则表达式中常用的方法
- 3.1 test() 方法——正则表达式对象的方法
- 3.2 search()方法——字符串对象的方法
- 3.3 replace()方法——字符串对象的方法
- 3.3.1 语法
- 3.3.2 例子
- 3.3.2.1 不使用正则例子
- 3.3.2.2 使用正则例子
- 3.4 split()方法——字符串对象的方法
- 3.4.1 语法
- 3.4.2 例子
- 3.5 match()方法——字符串对象的方法
- 3.5.1 关于match()方法
- 3.5.2 match()的例子
- 3.6 exec()方法——正则表达式对象的方法
- 4. 关于特定字符`()`——分组 + 捕获
- 4.1 描述
- 4.2 示例
- 5. 总结关于常见修饰符的使用
- 6. 参考
1. 前言
1.1 简介
- JavaScript正则表达式是一种强大的工具,用于在字符串中匹配和操作文本。它可以用来验证输入的格式、提取特定的文本、替换文本等。
1.2 js正则特殊字符即使用示例
- 可以看上篇文章,如下
JS正则01——JS正则表达式中各元字符的详细介绍以及常用的js正则示例.
2. 创建正则表达式的方式
2.1 两种创建正则表达式的方式
-
使用字面量创建:
- 语法如下:
var regex = /pattern/modifiers; // 修饰符 modifiers 可以省略
- 举例如下:
var regex = /hello/; // 匹配包含"hello"的字符串 var regex_2 = /^hello$/; //严格匹配,只能匹配"hello"字符串 var regex_3 = /^hello$/i; //只能匹配"hello"字符串,但不区分大小写匹配
- 语法如下:
-
使用构造函数创建:
- 语法如下:
var regex = new RegExp("pattern"); 或 var regex = new RegExp("pattern","modifiers");
- 举例如下:
var value = "hEllo"; var regex = new RegExp("hello"); // 匹配包含"hello"的字符串 var regex_2 = new RegExp("^hello$"); // 严格匹配,只能匹配"hello"字符串 var regex_3 = new RegExp("^hello$","i"); //只能匹配"hello"字符串,但不区分大小写匹配 alert( regex.test(value) ); // true-匹配成功 false-匹配失败
- 语法如下:
2.2 关于修饰符
- 常用的JavaScript正则表达式修饰符如下:
i
:不区分大小写(在匹配时忽略大小写)。g
:全局匹配(查找所有匹配项,而不仅仅是第一个)。m
:多行匹配,将开始和结束字符(^和$)视为多行的开始和结束,而不仅仅是整个字符串的开始和结束。s
:单行匹配,使点(.)元字符匹配包括换行符在内的任何字符。u
:Unicode匹配(启用完整的Unicode匹配模式,将模式视为由Unicode代码点组成的序列)。y
:粘性匹配(只从目标字符串的当前位置开始匹配)。
- 关于使用例子,下面我们会介绍,请继续……
3. 正则表达式中常用的方法
3.1 test() 方法——正则表达式对象的方法
test()
:- 用于检测字符串是否匹配正则表达式。返回值为布尔值,如果匹配成功则返回true,否则返回false。
- 如果只需判断字符串是否匹配正则表达式,可以使用该
test()
方法。
- 上面《2.1 两种创建正则表达式的方式》中以及上篇文章都是用 test() 方法说的示例,所以此处不再介绍。
3.2 search()方法——字符串对象的方法
search()
:
用于在字符串中查找与正则表达式匹配的第一个位置。返回匹配到的位置索引。如果没有匹配到,则返回 -1。- 例子:
var value = "abc-hello-123"; var regex = /hello/; alert( value.search(regex) ); // 返回4 (注意:search() 是字符串的方法,并且字符串的index从0开始)
var value = "abc-hello-123"; var regex = /^hello$/; alert( value.search(regex) ); // 返回-1(因为同时使用 ^和$ 时是严格匹配)
3.3 replace()方法——字符串对象的方法
3.3.1 语法
- replace():
- JavaScript中的正则表达式replace()方法用于在字符串中替换匹配的文本。
- 语法:
string.replace(regexp|substr, newSubstr|function)
regexp|substr
:可以是一个正则表达式或者一个要被替换的子字符串。newSubstr|function
:可以是一个新的字符串或者一个用于替换的函数。- 如果第一个参数是一个正则表达式,replace()方法将会替换所有匹配的文本。如果第一个参数是一个字符串,replace()方法只会替换第一个匹配的文本。
3.3.2 例子
3.3.2.1 不使用正则例子
- 如下:
var value = "abc-hello-123-hello-567"; alert( value.replace("hello","good") ); // 返回 abc-good-123-hello-567(非正则表达式时:只替换第一个匹配的文本)
3.3.2.2 使用正则例子
- 例子1——第二个参数是新字符串:
var value = "abc-hello-123-hello-567"; var regex = /hello/; alert( value.replace(regex,"good") ); // 返回 abc-good-123-hello-567(只替换第一个hello)
var value = "abc-hello-123-hello-567"; var regex = /hello/g; alert( value.replace(regex,"good") ); // 返回 abc-good-123-good-567(使用 g 可以全局替换,不只是替换第一个)
- 例子2——第二个参数是函数:
var value = "abc-hello-123"; var regex = /hello/; var newValue = value.replace(regex, function(str) { return str.toUpperCase(); }); alert(newValue); // 返回:abc-HELLO-123
3.4 split()方法——字符串对象的方法
3.4.1 语法
- JavaScript中的正则表达式
split()
方法用于将字符串分割成数组,根据指定的正则表达式模式进行分割。 - 语法:
str.split(regexp|separators)
3.4.2 例子
- 例子1——使用一般分隔符分割,不使用正则表达式
var value = "apple;banana;orange"; console.log(value.split(";")); //输出: ['apple', 'banana', 'orange']
- 例子2——使用正则表达式
var value = "I-123-love-456-you"; var regex = /[-]\d+[-]/; console.log(value.split(regex)); //输出: ['I', 'love', 'you']
3.5 match()方法——字符串对象的方法
3.5.1 关于match()方法
- 关于match()方法
- 通过调用该方法可以在字符串中查找匹配的内容。
- 如果 regexp 没有标记 g,那么它会以数组形式返回第一个匹配结果,数组中包含捕获组和属性 index(匹配位置)、input(输入字符串,等于 str):。
- 如果正则表达式具有全局标志(g),
match()
方法将返回一个数组,包含所有匹配到的内容。 - 如果没有找到匹配项,则返回null。
- 语法:
str.match(regexp)
3.5.2 match()的例子
- 例子1——:不使用全局匹配(g)
var value = "abc-hello-123-hello-567"; var regex = /hello/; var result = value.match(regex); // 匹配结果 var match = result[0]; // 匹配到的字符串 var index = result.index; // 匹配到的字符串在原始字符串中的索引位置(第一个位置) console.log(result); // 输出匹配到的字符和其他信息 console.log(result=="hello"); // 输出true console.log(match); // 输出 hello console.log(index); // 输出 4
- 例子2——:使用全局匹配(g)
var value = "abc-hello-123-hello-567"; var regex = /hello/g; // 使用 g 可以全局替换,不只是替换第一个 var result = value.match(regex); // 匹配结果 console.log(result); // 输出匹配结果数组:['hello', 'hello']
3.6 exec()方法——正则表达式对象的方法
- 关于
exec()
方法exec()
是 JavaScript 正则表达式对象的一个方法,用于在字符串中执行匹配操作。exec()
方法返回一个数组,包含匹配到的内容以及其他相关信息,如果没有找到匹配项,则返回null。exec()
方法好像不支持全局匹配,只能匹配第一个,设置了 g 不生效!
- 例子:
var value = "abc-hello-123-hello-567"; var regex = /hello/; var result = regex.exec(value); // 匹配结果 var match = result[0]; // 匹配到的字符串 var index = result.index; // 匹配到的字符串在原始字符串中的索引位置 console.log(result); console.log(match); // 输出 hello console.log(index); // 输出 4
4. 关于特定字符()
——分组 + 捕获
4.1 描述
()
括号在正则表达式中有特殊的含义,用于分组和捕获匹配的内容。- 分组:
()
可以将多个字符组合成一个单元,形成一个子表达式。例如,/(ab)+/可以匹配连续出现的"ab"字符串,如"abab"、"ababab"等。 - 捕获:
()
还可以用于捕获匹配的内容,以便后续使用。捕获的内容可以通过$1、$2等变量进行引用。例如,/(\d{4})-(\d{2})-(\d{2})/
可以匹配日期格式,同时将 年、月、日分别捕获到 $1、$2、$3 中。
- 分组:
4.2 示例
- 分组示例:
/(abc)+/
:匹配连续出现的"abc"字符串,如"abcabc"、"abcabcabc"等- 更多示例也可以看上篇文章的例子,好多用到了分组:
JS正则01——JS正则表达式中各元字符的详细介绍以及常用的js正则示例.
- 捕获示例:
- 示例1:匹配日期格式,如"2022-12-29",并将年、月、日分别捕获到$1、$2、$3中。
let str_0 = "2022-12-29"; var regex_0 = /(\d{4})-(\d{2})-(\d{2})/; let result_0 = str_0.match(regex_0); //匹配结果 console.log(result_0); console.log(result_0[0]); // 输出 2022-01-01(匹配到的字符串) console.log(result_0[1]); // 输出 2022(捕获到的) console.log(result_0[2]); // 输出 12(捕获到的) console.log(result_0[3]); // 输出 29(捕获到的)
- 示例2:
let str = "I love JavaScript"; // var regex = /JavaScript/; var regex = /Java(Script)/; let result = str.match(regex); console.log(result); console.log( result[0] ); // 输出 匹配结果:JavaScript (full match) console.log( result[1] ); // 输出 捕获组:Script (first capturing group) console.log( result.length ); // 2 // Additional information: console.log( result.index ); // 7 (match position) console.log( result.input ); // I love JavaScript (source string)
- 示例1:匹配日期格式,如"2022-12-29",并将年、月、日分别捕获到$1、$2、$3中。
5. 总结关于常见修饰符的使用
i
:不区分大小写匹配var value = "HeLLo"; var regex = /^hello$/i; // var regex = new RegExp("^hello$","i"); // 使用构造函数创建方式 alert(regex.test(value));
g
: 全局匹配(查找所有匹配项,而不仅仅是第一个)。
这个参考上面写的《3.5.2 match()的例子》中的例2,已经使用了这个修饰符,所以此处不介绍了。g和i
结合var value = "HeLLo-1-aa-hello-b-hEllo"; // 下面两种正则方式均可以 var regex = /hello/gi; // 既全局匹配 又 忽略大小写匹配 var regex_2 = new RegExp("hello","gi"); var result = value.match(regex); console.log(result); // 输出: ['HeLLo', 'hello', 'hEllo']
6. 参考
- 如下:
https://javascript.info/regexp-methods.