目录
[1. 简介](#1. 简介)
[1.1. 语法](#1.1. 语法)
[1.1.1. 使用RegExp构造函数创建正则表达式](#1.1.1. 使用RegExp构造函数创建正则表达式)
[1.1.2. 使用正则表达式字面量语法创建正则表达式](#1.1.2. 使用正则表达式字面量语法创建正则表达式)
[1.1.3. 正则表达式的应用](#1.1.3. 正则表达式的应用)
[2. 修饰符](#2. 修饰符)
[3. 方括号](#3. 方括号)
[4. 元字符](#4. 元字符)
[5. 量词](#5. 量词)
[6. RegExp对象方法](#6. RegExp对象方法)
[7. 支持正则的String的方法](#7. 支持正则的String的方法)
[8. 正则表达式体验](#8. 正则表达式体验)
[8.1. 验证](#8.1. 验证)
[8.2. 匹配](#8.2. 匹配)
[8.3. 替换](#8.3. 替换)
[8.4. 全文查找](#8.4. 全文查找)
[8.5. 忽略大小写](#8.5. 忽略大小写)
[8.6. 元字符使用](#8.6. 元字符使用)
[8.7. 字符集合的使用](#8.7. 字符集合的使用)
[8.7.1. 常用正则表达式](#8.7.1. 常用正则表达式)
1. 简介
正则表达式是一种特殊的字符串,它定义了一种搜索模式,用来在文本中查找、匹配和替换符合特定规则的字符串。在JavaScript中,正则表达式可以用于验证输入的格式、搜索特定文本、提取信息等任务。
1.1. 语法
在JavaScript中,正则表达式可以通过两种方式创建:使用RegExp构造函数或者直接使用正则表达式的字面量语法。
1.1.1. 使用RegExp构造函数创建正则表达式
调用RegExp构造函数时,可以传入两个参数:第一个参数是正则表达式的模式(pattern),即你希望匹配的字符串的模式;第二个参数是可选的修饰符(modifiers),用来指定正则表达式的行为方式。修饰符可以包括g(全局搜索)、i(忽略大小写)、m(多行模式)等。
var patt = new RegExp(pattern, modifiers);
例如,如果你想创建一个正则表达式来查找所有的数字,并且希望搜索是全局的(即找到所有匹配项,而不是在找到第一个匹配项后停止),你可以这样做:
var patt = new RegExp("\\d+", "g");
这里,\\d+ 是正则表达式的模式,它匹配一个或多个数字字符。"g" 是修饰符,表示全局搜索。
1.1.2. 使用正则表达式字面量语法创建正则表达式
正则表达式也可以通过字面量语法直接在代码中定义。这种方式下,正则表达式被斜杠(/)包围,修饰符可以附加在斜杠后面。
var patt = /pattern/modifiers;
使用同样的数字查找示例,使用字面量语法创建正则表达式如下:
var patt = /\d+/g;
这里,\d+ 是正则表达式的模式,与之前的例子相同,而g修饰符也表示全局搜索。
1.1.3. 正则表达式的应用
正则表达式在JavaScript中广泛应用于字符串的搜索、替换和分割等操作。例如,使用match方法可以找到字符串中所有匹配正则表达式的部分:
var str = "123 apples 456 bananas 789";
var matches = str.match(/\d+/g);
console.log(matches); // 输出: ["123", "456", "789"]
使用replace方法可以替换字符串中匹配正则表达式的部分:
var str = "123 apples 456 bananas 789";
var replacedStr = str.replace(/\d+/g, "###");
console.log(replacedStr); // 输出: "### apples ### bananas ###"
使用split方法可以根据正则表达式来分割字符串:
var str = "apple,banana,cherry";
var fruits = str.split(/,/);
console.log(fruits); // 输出: ["apple", "banana", "cherry"]
在这个例子中,,是正则表达式的模式,它匹配逗号字符,split方法会根据逗号来分割字符串。
2. 修饰符
修饰符是和正则表达式一起使用的,用来改变匹配行为的特殊字符。
|--------------------------------------------------------|------------------------------|
| 修饰符 | 描述 |
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
| m | 执行多行匹配。 |
-
i 修饰符:这个修饰符让正则表达式在匹配时不区分大小写。也就是说,如果你的模式中包含字母,使用 i 修饰符后,它会同时匹配大写和小写字母。例如,使用模式 /runoob/i 可以同时匹配字符串 "Visit RUnoob" 和 "visit runoob" 中的 "runoob" 和 "RUnoob"。
-
g 修饰符:这个修饰符让正则表达式进行全局匹配,意味着它会查找字符串中所有可能的匹配项,而不仅仅是第一个匹配项。例如,使用模式 /is/g 搜索字符串 "Is this all there is?" 时,它会找到所有的 "is",包括 "Is" 和 "this" 之间的 "is"。
-
m 修饰符:这个修饰符让正则表达式进行多行匹配。默认情况下,正则表达式是单行匹配的,即它只会在一行文本中寻找匹配项。但是,当你添加 m 修饰符后,它会将字符串的每一行都视为一个独立的匹配目标。例如,如果你有以下文本:
Apple
banana
cherry
3. 方括号
方括号在正则表达式中用来定义一个字符集合,用来匹配集合中的任意一个字符。
|--------------------|----------------------|
| 表达式 | 描述 |
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
[abc]
:这个表达式会匹配一次字符a
、b
或c
中的任意一个。例如,在字符串"bat"中,它会匹配"b"。[^abc]
:这个表达式会匹配不是a
、b
或c
的任意一个字符。例如,在字符串"bat"中,它会匹配"t",因为"t"不在集合abc
中。[0-9]
:这个表达式会匹配任何一个数字,从0
到9
。例如,在字符串"123"中,它会匹配所有的数字。[a-z]
:这个表达式会匹配任何一个小写字母,从a
到z
。例如,在字符串"hello"中,它会匹配所有的字母。[A-Z]
:这个表达式会匹配任何一个大写字母,从A
到Z
。例如,在字符串"HELLO"中,它会匹配所有的大写字母。[A-z]
:这个表达式会匹配任何一个字母,不论大小写,从A
到z
。例如,在字符串"Hello"中,它会匹配"H"和"e"。[adgk]
:这个表达式会匹配给定集合adgk
中的任意一个字符。例如,在字符串"adgk"中,它会匹配所有的字符。[^adgk]
:这个表达式会匹配不在集合adgk
中的任意一个字符。例如,在字符串"adgk"中,它会匹配空字符,因为没有其他字符不在集合中。(red|blue|green)
:这个表达式会匹配任何一个指定的选项,这里是"red"、"blue"或"green"。例如,在字符串"The color is red"中,它会匹配"red"。
4. 元字符
元字符是正则表达式中的特殊符号,它们用于定义特定的字符匹配规则。
|--------------------------------------------------------------------------------|-------------------------------|
| 元字符 | 描述 |
| . | 查找单个字符,除了换行和行结束符。 |
| \w | 查找数字、字母及下划线。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NULL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
- . (点):这个元字符会匹配除了换行符之外的任何一个字符。例如,在字符串 "That's hot!" 中,它会匹配 "T", "h", "a" 等。
- \w:这个元字符会匹配任何一个单词字符,包括小写字母、大写字母、数字和下划线。例如,在字符串 "Give 100%!" 中,它会匹配 "G", "i", "v", "e", "1", "0", "%" 和 "!"。
- \W:这个元字符会匹配任何一个非单词字符,即不是字母、数字或下划线的字符。例如,在字符串 "Give 100%!" 中,它会匹配 " "(空格)和 "%"。
- \d:这个元字符会匹配任何一个数字,从 0 到 9。例如,在字符串 "Give 100%!" 中,它会匹配两个 "1" 和一个 "0"。
- \D:这个元字符会匹配任何一个非数字字符。例如,在字符串 "Give 100%!" 中,除了 "1" 和 "0" 之外的所有字符都会被匹配。
- \s:这个元字符会匹配任何一个空白字符,包括空格、制表符、换行符等。例如,在字符串 "Is this all there is?" 中,它会匹配所有的空格。
- \S:这个元字符会匹配任何一个非空白字符。例如,在字符串 "Is this all there is?" 中,它会匹配所有的字母和标点符号。
- \b:这个元字符会匹配单词边界,即单词的开头或结尾。例如,在字符串 "Visit Runooob" 中,它会匹配 "Visit" 和 "Runoo" 的开头和结尾。
- \B:这个元字符会匹配非单词边界的位置,即字符前后不是同时是单词字符或同时是非单词字符的地方。例如,在字符串 "Visit Runooob" 中,它会匹配 " "(空格)。
- \n:这个元字符会匹配换行符。例如,在字符串 "Visit\nRunooob" 中,它会匹配 "\n"。
- \f:这个元字符会匹配换页符。
- \r:这个元字符会查找回车符。
- \t:这个元字符会查找制表符。
- \v:这个元字符会查找垂直制表符。
- \xxx:这个元字符会查找以八进制数 xxx 规定的字符。
- \xdd:这个元字符会查找以十六进制数 dd 规定的字符。
- \uxxxx:这个元字符会查找以十六进制数 xxxx 规定的 Unicode 字符。
5. 量词
量词在正则表达式中用来指定某个模式应该出现的次数。
|--------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 量词 | 描述 |
| n+ | 匹配任何包含至少一个 n 的字符串。例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。 |
| n* | 匹配任何包含零个或多个 n 的字符串。例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。 |
| n? | 匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。 |
| n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 |
| n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
n+
:这个量词表示前面的字符或模式至少出现一次。例如,/a+/
会匹配 "candy" 中的 "a",因为 "a" 至少出现了一次。n*
:这个量词表示前面的字符或模式可以出现零次或多次。例如,/bo*/
会匹配 "A ghost booooed" 中的 "boooo",因为 "b" 出现了多次,也会匹配 "A bird warbled" 中的 "b",因为 "b" 出现了一次,但不会匹配 "A goat grunted",因为 "a" 后面没有 "b"。n?
:这个量词表示前面的字符或模式可以出现零次或一次。例如,/e?le?/
会匹配 "angel" 中的 "el",因为 "e" 出现了一次,也会匹配 "angle" 中的 "le",因为 "e" 出现了零次。n{X}
:这个量词表示前面的字符或模式恰好出现 X 次。例如,/a{2}/
会匹配 "caandy" 中的两个连续的 "a",但不匹配 "candy" 中的 "a",因为 "a" 只出现了一次。n{X,}
:这个量词表示前面的字符或模式至少出现 X 次。例如,/a{2,}/
会匹配 "caandy" 和 "caaaaaaandy" 中的所有 "a",因为 "a" 至少出现了两次。n{X,Y}
:这个量词表示前面的字符或模式至少出现 X 次,但不超过 Y 次。例如,/a{1,3}/
会匹配 "candy" 中的 "a","caandy" 中的两个 "a",以及 "caaaaaaandy" 中的前三个 "a"。n$
:这个量词表示字符串以前面的字符或模式结尾。例如,/is$/
会匹配 "Is this his" 中的 "is",因为它位于字符串的末尾。^n
:这个量词表示字符串以前面的字符或模式开头。例如,/^Is/
会匹配 "Is this his" 中的 "Is",因为它位于字符串的开头。?=n
:这个量词表示前面的字符或模式后面必须紧跟着指定的字符串 n。例如,/is(?= all)/
会匹配 "Is this all there is" 中的 "is",因为它后面紧跟着 "all"。?!n
:这个量词表示前面的字符或模式后面不能紧跟着指定的字符串 n。例如,/is(?! all)/
会匹配 "Is this all there is" 中的 "is",因为它后面没有紧跟着 "all"。
6. RegExp对象方法
RegExp对象在JavaScript中提供了几种方法来处理正则表达式。
|----------|-----------------------------|
| 方法 | 描述 |
| compile | 在 1.5 版本中已废弃。 编译正则表达式。 |
| exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 |
| test | 检索字符串中指定的值。返回 true 或 false。 |
| toString | 返回正则表达式的字符串。 |
compile()
方法:
这个方法在JavaScript 1.5版本中被用来编译正则表达式,但现在已经不推荐使用,因为它已经被废弃了。现在的JavaScript版本中,正则表达式在定义时就已经被编译,所以不需要显式地调用compile()
方法。exec()
方法:
这个方法用于在给定的字符串中执行匹配操作。如果找到了匹配的文本,它会返回一个数组,数组中包含匹配的文本以及捕获的组(如果有的话)。如果没有找到匹配项,它会返回null
。这个方法通常用于更详细地访问匹配的结果,包括匹配的位置和匹配的子字符串。test()
方法:
这个方法用于测试一个字符串是否与正则表达式匹配。它只返回一个布尔值:如果字符串匹配正则表达式,则返回true
;如果没有匹配,则返回false
。这个方法通常用于快速检查一个字符串是否符合某个模式。toString()
方法:
这个方法返回一个字符串,该字符串表示正则表达式的源文本。这意味着它返回正则表达式对象的模式和修饰符。这个方法可以用来检查或输出正则表达式的确切形式。
7. 支持正则的String的方法
在JavaScript中,字符串(String)对象提供了几种方法,这些方法可以使用正则表达式来处理字符串。
|-------------------------------------------------------------------|------------------|
| 方法 | 描述 |
| search | 检索与正则表达式相匹配的值。 |
| match | 找到一个或多个正则表达式的匹配。 |
| replace | 替换与正则表达式匹配的子串。 |
| split | 把字符串分割为字符串数组。 |
- search() 方法: search() 方法用于在字符串中查找特定的子字符串或正则表达式。它会返回匹配项的起始索引位置,如果没有找到匹配项,则返回 -1。这个方法对于确定一个特定模式是否存在于字符串中非常有用。
- match() 方法: match() 方法用于找到一个或多个正则表达式的匹配。它返回一个数组,其中包含所有匹配的子字符串以及捕获的组(如果有的话)。如果没有找到匹配项,它会返回 null。这个方法通常用于提取字符串中符合正则表达式的部分。
- replace() 方法: replace() 方法用于替换字符串中与正则表达式匹配的部分。你可以指定一个新的字符串来替换找到的匹配项,或者提供一个函数来动态生成替换文本。如果正则表达式带有全局标志(g),则替换所有匹配项;否则,只替换第一个匹配项。这个方法不会改变原始字符串,而是返回一个新的字符串。
- split() 方法: split() 方法用于把一个字符串分割成多个子字符串,并返回一个包含这些子字符串的数组。你可以指定一个分隔符字符串或正则表达式来决定如何分割原始字符串。如果不指定分隔符,整个字符串会被分割成单个字符的数组。通过设置可选的limit参数,你可以控制返回的数组的最大长度。
8. 正则表达式体验
8.1. 验证
注意 :这里是使用正则表达式对象 来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式,返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));
8.2. 匹配
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符,返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);
8.3. 替换
注意 :这里是使用字符串对象 来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了,说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并没有变化,只是返回了一个新字符串
console.log("str="+str);//str=Hello World!
8.4. 全文查找
如果不使用g对正则表达式对象进行修饰,则使用正则表达式进行查找时,仅返回第一个匹配;使用g后,返回所有匹配。
// 目标字符串
var targetStr = 'Hello World!';
// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组,发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
对比
// 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组,发现可以获取到"H"和"W"
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
8.5. 忽略大小写
//目标字符串
var targetStr = 'Hello WORLD!';
//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组,仅得到'o'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
对比
//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组,得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
8.6. 元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false
8.7. 字符集合的使用
//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 : var reg=/^\d*$/;
var b = reg.test(targetStr);//true
//数字+字母+下划线,6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true
8.7.1. 常用正则表达式
|------|---------------------------------------------------------------|
| 需求 | 正则表达式 |
| 用户名 | /^[a-zA-Z ][a-zA-Z-0-9]{5,9}/ |
| 密码 | /\^\[a-zA-Z0-9 _-@#\& \*\]{6,12}/ |
| 前后空格 | /^\s+|\s+/g |
| 电子邮箱 | /\^\[a-zA-Z0-9 _.-\]+@(\[a-zA-Z0-9-\]+\[.\]{1})+\[a-zA-Z\]+/ |