零基础学习JS--基础篇--正则表达式

正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExpexectest 方法,以及 StringmatchmatchAllreplacesearchsplit 方法。

创建一个正则表达式:

你可以使用以下两种方法构建一个正则表达式:

使用一个正则表达式字面量,其由包含在斜杠之间的模式组成,如下所示:

javascript 复制代码
var re = /ab+c/;

或者调用RegExp对象的构造函数,如下所示:

javascript 复制代码
var re = new RegExp("ab+c");
编写一个正则表达式的模式:

使用简单模式:

简单模式是由你想直接找到的字符构成。比如,/abc/ 这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况。例如在 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中会匹配成功。在上述两个例子中,匹配的子字符串是 "abc"。但是在 "Grab crab" 中会匹配失败,因为它虽然包含子字符串 "ab c",但并不是准确的 "abc"。

使用特殊字符:

当你需要匹配一个不确定的字符串时,比如寻找一个或多个 "b",或者寻找空格,可以在模式中使用特殊字符。比如,你可以使用 /ab*c/ 去匹配一个单独的 "a" 后面跟了零个或者多个 "b",同时后面跟着 "c" 的字符串:*的意思是前一项出现零次或者多次。在字符串 "cbbabbbbcdebc" 中,这个模式匹配了子字符串 "abbbbc"。

正则表达式中的特殊字符:

由于此处文字量较大,建议去MDN官网查看,这里不再阐述,这里只介绍*、+、?三个。

|--------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|
| * | 匹配前一个表达式 0 次或多次。等价于 {0,}。 例如,/bo*/ 会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b',但是在 "A goat grunted" 中不会匹配任何内容。 |

|---------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
| + | 匹配前面一个表达式 1 次或者多次。等价于 {1,}。 例如,/a+/ 会匹配 "candy" 中的 'a' 和 "caaaaaaandy" 中所有的 'a',但是在 "cndy" 中不会匹配任何内容。 |

|-----------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| ? | 匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。 例如,/e?le?/ 匹配 "angel" 中的 'el'、"angle" 中的 'le' 以及 "oslo' 中的 'l'。 |

Escaping:

如果你需要使用任何特殊字符的字面值(例如,搜索字符'*'),你必须通过在它前面放一个反斜杠来转义它。例如,要搜索'a'后跟'*'后跟'b',你应该使用/a\*b/- 反斜杠"转义"字符'*',使其成为文字而非特殊符号。

类似地,如果你正在编写正则表达式文字并且需要匹配斜杠('/'),那么需要转义它(否则,斜杠是正则终止符)。

如果将 RegExp 构造函数与字符串文字一起使用,请记住反斜杠是字符串文字中的转义,因此要在正则表达式中使用它,你需要在字符串文字级别转义它。 /a\*b/new RegExp("a\\*b")创建的表达式是相同的,搜索"a"后跟文字"*"后跟"b"。

使用括号的子字符串匹配:

一个正则表达式模式使用括号,将导致相应的子匹配被记住。例如,/a(b)c /可以匹配字符串"abc",并且记得"b"。回调这些括号中匹配的子串,使用数组元素 [1],......[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。

通过标志进行高级搜索:

正则表达式有六个可选参数 (flags) 允许全局和不分大小写搜索等。这些参数既可以单独使用也能以任意顺序一起使用,并且被包含在正则表达式实例中。

标志 描述
g 全局搜索。
i 不区分大小写搜索。
m 多行搜索。
s 允许 . 匹配换行符。
u 使用 unicode 码的模式进行匹配。
y 执行"粘性 (sticky)"搜索,匹配从目标字符串的当前位置开始。

为了在正则表达式中包含标志,请使用以下语法:

javascript 复制代码
var re = /pattern/flags;

或者

javascript 复制代码
var re = new RegExp("pattern", "flags");

使用正则表达式:

正则表达式可以被用于 RegExpexectest (en-US) 方法以及 Stringmatch (en-US)replacesearch (en-US)split (en-US) 方法。这些方法在 JavaScript 手册中有详细的解释。

方法 描述
exec 一个在字符串中执行查找匹配的 RegExp 方法,它返回一个数组(未匹配到则返回 null)。
test 一个在字符串中测试是否匹配的 RegExp 方法,它返回 true 或 false。
match 一个在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null。
matchAll 一个在字符串中执行查找所有匹配的 String 方法,它返回一个迭代器(iterator)。
search 一个在字符串中测试匹配的 String 方法,它返回匹配到的位置索引,或者在失败时返回 -1。
replace 一个在字符串中执行查找匹配的 String 方法,并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。

当你想要知道在一个字符串中的一个匹配是否被找到,你可以使用 test 或 search 方法;想得到更多的信息(但是比较慢)则可以使用 exec 或 match 方法。如果你使用 exec 或 match 方法并且匹配成功了,那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象(详见下)。如果匹配失败,那么 exec 方法返回 null(也就是 false)。

在接下来的例子中,脚本将使用 exec 方法在一个字符串中查找一个匹配。

javascript 复制代码
var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");

如果你不需要访问正则表达式的属性,这个脚本通过另一个方法来创建 myArray:

javascript 复制代码
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
// 和 "cdbbdbsbz".match(/d(b+)d/g); 相似。
// 但是 "cdbbdbsbz".match(/d(b+)d/g) 输出数组 [ "dbbd" ],
// 而 /d(b+)d/g.exec('cdbbdbsbz') 输出数组 [ "dbbd", "bb", index: 1, input: "cdbbdbsbz" ].

如果你想通过一个字符串构建正则表达式,那么这个脚本还有另一种方法:

javascript 复制代码
var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

通过这些脚本,匹配成功后将返回一个数组并且更新正则表达式的属性,如下表所示。

正则表达式执行后的返回信息:

对象 属性或索引 描述 在例子中对应的值
myArray 匹配到的字符串和所有被记住的子字符串。 ["dbbd", "bb"]
myArray index 在输入的字符串中匹配到的以 0 开始的索引值。 1
myArray input 初始字符串。 "cdbbdbsbz"
myArray [0] 最近一个匹配到的字符串。 "dbbd"
myRe lastIndex 开始下一个匹配的起始索引值。(这个属性只有在使用 g 参数时可用在 通过参数进行高级搜索 一节有详细的描述.) 5
myRe source 模式字面文本。在正则表达式创建时更新,不执行。 "d(b+)d"

如这个例子中的第二种形式所示,你可以使用对象初始器创建一个正则表达式实例,但不分配给变量。如果你这样做,那么,每一次使用时都会创建一个新的正则表达式实例。因此,如果你不把正则表达式实例分配给一个变量,你以后将不能访问这个正则表达式实例的属性。例如,假如你有如下脚本:

javascript 复制代码
var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + myRe.lastIndex);

这个脚本输出如下:

javascript 复制代码
The value of lastIndex is 5

然而,如果你有如下脚本:

javascript 复制代码
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);

它显示为:

javascript 复制代码
The value of lastIndex is 0

当发生/d(b+)d/g 使用两个不同状态的正则表达式对象,lastIndex 属性会得到不同的值。如果你需要访问一个正则表达式的属性,则需要创建一个对象初始化生成器,你应该首先把它赋值给一个变量。

附:以上内容均为个人在MDN网站上学习JS的笔记,若有侵权,将在第一时间删除,若有错误,将在第一时间修改。

相关推荐
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
吖秧吖1 小时前
three.js 杂记
开发语言·前端·javascript
前端小超超1 小时前
vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
前端·javascript·vue.js
大叔是90后大叔1 小时前
vue3中查找字典列表中某个元素的值
前端·javascript·vue.js
IT大玩客2 小时前
JS如何获取MQTT的主题
开发语言·javascript·ecmascript