JavaScript 正则表达式基础
什么是正则表达式?
正则表达式(Regular Expression,简称 RegExp)是一种强大的文本模式匹配工具,用于在字符串中搜索、匹配和替换文本。它使用特定的语法规则来定义字符模式,能够高效地处理各种文本操作任务。
在JavaScript中,正则表达式是一种对象,可以用于执行模式匹配、搜索和替换等操作,尤其适合处理表单验证、数据提取和字符串操作等场景。
提示
正则表达式初看可能有些复杂,但掌握基础后,它会成为处理文本的强大工具!
创建正则表达式
在JavaScript中,有两种方式可以创建正则表达式:
1. 使用正则表达式字面量
这是最常用的方法,使用斜杠(/
)包围模式:
javascript
const regex = /pattern/flags;
例如:
javascript
const regex = /hello/i; // 匹配"hello",不区分大小写
2. 使用RegExp构造函数
javascript
const regex = new RegExp('pattern', 'flags');
例如:
javascript
const regex = new RegExp('hello', 'i'); // 匹配"hello",不区分大小写
备注
当正则表达式需要动态生成时,构造函数方式更为适合。
正则表达式的标志(flags)
标志用于改变正则表达式的匹配行为:
标志 | 描述 |
---|---|
i | 忽略大小写 |
g | 全局匹配(查找所有匹配项而非在找到第一个后停止) |
m | 多行匹配 |
s | 允许 . 匹配换行符 |
u | 使用unicode码点匹配 |
y | 执行"粘性"搜索,匹配从目标字符串的当前位置开始 |
示例:
javascript
// 全局搜索,不区分大小写
const regex = /javascript/gi;
const text = "JavaScript is amazing. I love javascript!";
const result = text.match(regex);
console.log(result); // 输出: ["JavaScript", "javascript"]
元字符和特殊字符
正则表达式中的一些字符有特殊含义:
元字符 | 描述 |
---|---|
. | 匹配除换行符外的任意单个字符 |
\d | 匹配任意数字,等价于 [0-9] |
\D | 匹配任意非数字字符,等价于 [^0-9] |
\w | 匹配任意字母、数字或下划线,等价于 [A-Za-z0-9_] |
\W | 匹配任意非字母、数字或下划线的字符 |
\s | 匹配任意空白字符(空格、制表符、换行符等) |
\S | 匹配任意非空白字符 |
\b | 匹配单词边界 |
\B | 匹配非单词边界 |
示例:
javascript
// 匹配所有数字
const numbers = "Year: 2023, Price: $199.99";
const digitsRegex = /\d+/g; // 一个或多个数字
const result = numbers.match(digitsRegex);
console.log(result); // 输出: ["2023", "199", "99"]
// 匹配单词边界的"is"
const text = "This is an island with history.";
const boundaryRegex = /\bis\b/g;
const boundaryResult = text.match(boundaryRegex);
console.log(boundaryResult); // 输出: ["is"]
量词
量词用于指定要匹配的字符或表达式的数量:
量词 | 描述 |
---|---|
* | 匹配前面的表达式0次或多次 |
+ | 匹配前面的表达式1次或多次 |
? | 匹配前面的表达式0次或1次(使其可选) |
{n} | 精确匹配前面的表达式n次 |
{n,} | 匹配前面的表达式至少n次 |
{n,m} | 匹配前面的表达式至少n次但不超过m次 |
示例:
javascript
// 匹配电话号码格式: XXX-XXX-XXXX
const phoneRegex = /\d{3}-\d{3}-\d{4}/;
console.log(phoneRegex.test("123-456-7890")); // 输出: true
console.log(phoneRegex.test("123-45-7890")); // 输出: false
// 匹配HTML标签
const htmlRegex = /<.+?>/g; // 非贪婪模式,匹配最短的符合条件的字符串
const html = "<p>This is a <strong>bold</strong> paragraph</p>";
console.log(html.match(htmlRegex)); // 输出: ["<p>", "<strong>", "</strong>", "</p>"]
警告
默认情况下,量词是"贪婪的",会尽可能多地匹配字符。添加?
可使量词变为"非贪婪"模式,尽可能少地匹配。
字符类
字符类允许你定义一组字符中的任意一个进行匹配:
字符类 | 描述 |
---|---|
[abc] | 匹配a、b或c中的任意一个字符 |
[^abc] | 匹配除a、b或c以外的任意字符 |
[a-z] | 匹配a到z范围内的任意字符 |
[A-Z] | 匹配A到Z范围内的任意字符 |
[0-9] | 匹配0到9范围内的任意数字 |
示例:
javascript
// 匹配元音字母
const vowelRegex = /[aeiou]/gi;
const text = "Hello World";
console.log(text.match(vowelRegex)); // 输出: ["e", "o", "o"]
// 匹配非数字字符
const nonDigitRegex = /[^0-9]/g;
const code = "A1B2C3";
console.log(code.match(nonDigitRegex)); // 输出: ["A", "B", "C"]
分组和捕获
圆括号()
用于分组和捕获匹配的文本:
javascript
// 捕获并重组日期格式
const dateRegex = /(\d{2})-(\d{2})-(\d{4})/;
const date = "25-12-2023";
const newFormat = date.replace(dateRegex, "$3/$2/$1");
console.log(newFormat); // 输出: "2023/12/25"
// 使用命名捕获组(ES2018+)
const dateRegexNamed = /(?<day>\d{2})-(?<month>\d{2})-(?<year>\d{4})/;
const dateMatch = "25-12-2023".match(dateRegexNamed);
console.log(dateMatch.groups); // 输出: {day: "25", month: "12", year: "2023"}
正则表达式方法
JavaScript中处理正则表达式的常用方法:
String对象方法
1. match()
查找字符串中匹配正则表达式的部分:
javascript
const text = "The rain in Spain stays mainly in the plain";
const regex = /ain/g;
const matches = text.match(regex);
console.log(matches); // 输出: ["ain", "ain", "ain"]
2. replace()
替换匹配的文本:
javascript
const text = "John Smith";
const newText = text.replace(/(\w+)\s(\w+)/, "$2, $1");
console.log(newText); // 输出: "Smith, John"
3. search()
返回匹配位置的索引:
javascript
const text = "Visit Microsoft!";
const position = text.search(/Microsoft/i);
console.log(position); // 输出: 6
4. split()
使用正则表达式分割字符串:
javascript
const text = "How are you doing today?";
const words = text.split(/\s+/);
console.log(words); // 输出: ["How", "are", "you", "doing", "today?"]
RegExp对象方法
1. test()
检测字符串是否匹配正则表达式,返回true或false:
javascript
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("user@example.com")); // 输出: true
console.log(emailRegex.test("invalid-email")); // 输出: false
2. exec()
执行搜索匹配,返回详细信息:
javascript
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = regex.exec("25-12-2023");
console.log(result[0]); // 完整匹配: "25-12-2023"
console.log(result[1]); // 第一个捕获组: "25"
console.log(result[2]); // 第二个捕获组: "12"
console.log(result[3]); // 第三个捕获组: "2023"
常见应用场景
1. 表单验证
javascript
// 电子邮件验证
function validateEmail(email) {
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return regex.test(email);
}
console.log(validateEmail("user@example.com")); // 输出: true
console.log(validateEmail("invalid-email")); // 输出: false
// 密码强度检查(至少8个字符,包含大小写字母和数字)
function checkPasswordStrength(password) {
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
return regex.test(password);
}
console.log(checkPasswordStrength("Abc12345")); // 输出: true
console.log(checkPasswordStrength("password")); // 输出: false
2. 数据提取
javascript
// 从文本中提取所有URL
function extractUrls(text) {
const urlRegex = /https?:\/\/[^\s]+/g;
return text.match(urlRegex) || [];
}
const content = "Visit our website at https://example.com and https://blog.example.com";
console.log(extractUrls(content));
// 输出: ["https://example.com", "https://blog.example.com"]
3. 格式化数据
javascript
// 将电话号码格式化为 (XXX) XXX-XXXX
function formatPhoneNumber(phoneNumber) {
// 首先移除所有非数字字符
const cleaned = phoneNumber.replace(/\D/g, '');
// 然后应用新格式
const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
if (match) {
return `(${match[1]}) ${match[2]}-${match[3]}`;
}
return null;
}
console.log(formatPhoneNumber("1234567890")); // 输出: "(123) 456-7890"
console.log(formatPhoneNumber("123-456-7890")); // 输出: "(123) 456-7890"
正则表达式的注意事项
- 性能考虑:复杂的正则表达式可能导致性能问题,特别是在处理大量文本时。
- 可读性:正则表达式可能难以阅读和维护,适当添加注释很重要。
- 贪婪匹配:默认情况下,量词是贪婪的,可能导致意外结果。
- 特殊字符转义:如果要匹配特殊字符(如
*
,.
,+
等),需要使用反斜杠转义。
javascript
// 转义特殊字符的示例
const price = "$19.99";
const dollarRegex = /\$/; // 转义 $ 符号
console.log(dollarRegex.test(price)); // 输出: true
// 匹配包含小数点的数字
const numberRegex = /\d+\.\d+/;
console.log(numberRegex.test("19.99")); // 输出: true
总结
正则表达式是处理字符串的强大工具,能够帮助我们高效地完成各种文本匹配、查找和替换任务。本文介绍了JavaScript中正则表达式的基础知识,包括:
- 创建正则表达式的两种方法
- 各种标志及其作用
- 元字符、特殊字符和字符类
- 量词和分组
- 正则表达式相关的方法
- 常见应用场景
掌握这些基础知识后,你就能够应对大多数文本处理需求,并逐步构建更复杂的正则表达式模式。
练习题
- 编写一个正则表达式来验证用户名(只允许字母、数字和下划线,长度为5-20个字符)
- 创建一个正则表达式来匹配所有HTML标签
- 编写一个函数,使用正则表达式从文本中提取所有的日期(格式为MM/DD/YYYY或MM-DD-YYYY)
- 使用正则表达式验证IP地址格式是否正确
进一步学习资源
记住,正则表达式的掌握需要实践和耐心。从简单模式开始,逐步构建更复杂的表达式,最终你将能够轻松处理各种文本匹配和操作任务。