《现代Javascript高级教程》正则表达式的常见问题与练习

简介: 正则表达式的常见问题与练习正则表达式是面试中经常被提及的主题之一,但很多人在面试中对于正则表达式的问题常常感到困惑。在本节中,我将通过一些常见问题和练习题目来帮助你更好地理解和掌握正则表达式的技巧。

正则表达式的常见问题与练习

正则表达式是面试中经常被提及的主题之一,但很多人在面试中对于正则表达式的问题常常感到困惑。在本节中,我将通过一些常见问题和练习题目来帮助你更好地理解和掌握正则表达式的技巧。

问题一:JavaScript 中的字符串与正则表达式操作

在 JavaScript 中,我们可以使用三个方法来操作字符串和正则表达式:testexecmatch。下面是它们的具体用法及括号在这些方法中的作用。

  1. RegExp.prototype.test(): test 是 JavaScript 中正则表达式对象的一个方法,用于检测正则表达式对象与传入的字符串是否匹配。如果匹配,则返回 true,否则返回 false。使用方法如下:
regexObj.test(str);

示例:

/Jack/.test('ack'); // false

test 方法中,括号只起到分组的作用,例如:

/123{2}/.test('123123'); // false
/(123){2}/.test('123123'); // true

String.prototype.match(): match 是字符串的方法,它接受一个正则表达式作为参数,并返回字符串中与正则表达式匹配的结果。在 match 方法中,括号的作用有两个:

  • 分组
  • 捕获。捕获的意思是将用户指定的匹配到的子字符串暂存并返回给用户。

当传入的正则表达式没有使用 g 标志时,返回一个数组。数组的第一个值为第一个完整匹配,后续的值分别为括号捕获的所有值,并且数组还包含以下三个属性:

  • groups:命名捕获组
  • index:匹配结果的开始下标
  • input:传入的原始字符串

示例:

const result1 = '123123'.match(/123{2}/); // null
const result2 = '123123'.match(/(123){2}/); // ["123123", "123", index: 0, input: "123123", groups: undefined]
console.log(result2.index); // 0
console.log(result2.input); // 123123
console.log(result2.groups); // undefined

  1. 当传入的正则表达式有 g 标志时,将返回所有与正则表达式匹配的结果,忽略捕获。
  2. RegExp.prototype.exec(): exec 是正则表达式的方法,它接受一个

字符串作为参数,并返回与正则表达式匹配的结果。返回结果是一个数组,其中包含了匹配到的信息。在 exec 方法中,括号的作用同样是分组和捕获。

当传入的正则表达式没有使用 g 标志时,每次调用 exec 方法都会返回第一个匹配结果的信息数组,包括匹配的字符串、分组捕获的值以及其他属性。

示例:

const regex = /(\d+)([a-z])/;
const str = '123a';
let result;
while ((result = regex.exec(str)) !== null) {
  console.log(result[0]); // 123a
  console.log(result[1]); // 123
  console.log(result[2]); // a
  console.log(result.index); // 0
  console.log(result.input); // 123a
  console.log(result.groups); // undefined
  regex.lastIndex = result.index + 1; // 设置下次匹配开始的位置
}

当传入的正则表达式有 g 标志时,exec 方法将持续查找匹配的结果。

问题二:在正则表达式中匹配多个空格

有时候,我们希望匹配连续的多个空格,可以使用正则表达式中的特殊字符 \s

示例:

javascript

复制代码

const str = 'Hello    World';
const regex = /\s+/;
const result = str.split(regex);
console.log(result); // ["Hello", "World"]

在上述示例中,我们使用 \s+ 匹配连续的多个空格,并通过 split 方法将字符串分割成数组。结果中的多个空格被去除,只留下了单词。

问题三:在正则表达式中匹配邮箱地址

匹配邮箱地址是正则表达式中的一个常见需求。下面给出一个简单的匹配规则:

const regex = /^[A-Za-z0-9]+@[A-Za-z0-9]+\.[A-Za-z]{2,}$/;

这个正则表达式的意思是匹配由字母、数字组成的用户名,紧接着是一个 @ 符号,然后是由字母、数字组成的域名,最后是一个以两个或更多字母组成的顶级域名。

示例:

const email = 'example@example.com';
const regex = /^[A-Za-z0-9]+@[A-Za-z0-9]+\.[A-Za-z]{2,}$/;
console.log(regex.test(email)); // true

在上述示例中,我们使用 test 方法检测邮箱地址是否符合正则表达式的规则。

问题四:在正则表达式中替换字符串

在 JavaScript 中,我们可以使用 String.prototype.replace() 方法来替换字符串中的内容。正则表达式可以用于指定要替换的模式。

示例:

const str = 'Hello, World!';
const regex = /World/;
const newStr = str.replace(regex, 'JavaScript');
console.log(newStr); // "Hello, JavaScript!"

在上述示例中,我们使用 replace 方法将字符串中的 "World" 替换为 "JavaScript"。

问题五:在正则表达式中使用修饰符

在正则表达式中,修饰符是在正则表达式主体后面的字符,用于控制匹配模式的行为。

常见的修饰符有:

  • i:不区分大小写进行匹配。
  • g:全局匹配,匹配到一个结果后继续查找下一个匹配项。
  • m:多行匹配,允许匹配换行符。

示例:

const str = 'Hello, hello, hElLo!';
const regex = /hello/i;
const result = str.match(regex);
console.log(result); // ["Hello"]

在上述示例中,我们使用修饰符 i 来实现不区分大小写的匹配。正则表达式 /hello/i 匹配到了字符串中的 "Hello"。

练习题

尝试解决以下正则表达式的练习题目。

  1. 匹配手机号码:
const regex = /^1[3456789]\d{9}$/;
  1. 这个正则表达式可以用来匹配中国大陆的手机号码,以 "1" 开头,后面跟随 10 个数字。
  2. 匹配身份证号码:
const regex = /^\d{17}(\d|X|x)$/;
  • 这个正则表达式可以用来匹配中国大陆的身份证号码,由 17 位数字和一位数字或字母 "X"(不区分大小写)组成。
  • 匹配 URL:
const regex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
  • 这个正则表达式可以用来匹配以 "http://"、"https://" 或 "ftp://" 开头的 URL。

目录
相关文章
|
21天前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
33 0
|
10天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
20 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
4天前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript中的正则表达式详细展示
JavaScript中的正则表达式详细展示
16 6
|
6天前
|
自然语言处理 JavaScript 前端开发
Python高级语法与正则表达式(二)
正则表达式描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。
|
7天前
|
安全 算法 Python
Python高级语法与正则表达式(一)
Python提供了 with 语句的写法,既简单又安全。 文件操作的时候使用with语句可以自动调用关闭文件操作,即使出现异常也会自动关闭文件操作。
|
7天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
9 1
|
7天前
|
JavaScript 前端开发 测试技术
JavaScript进阶-正则表达式基础
【6月更文挑战第21天】正则表达式是处理字符串的利器,JavaScript中广泛用于搜索、替换和验证。本文讲解正则基础,如字符匹配、量词和边界匹配,同时也讨论了常见问题和易错点,如大小写忽略、贪婪匹配,提供代码示例和调试建议。通过学习,开发者能更好地理解和运用正则表达式解决文本操作问题。
|
9天前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
13 1
|
21天前
|
前端开发 JavaScript 搜索推荐
[初学者必看]JavaScript 15题简单小例子练习,锻炼代码逻辑思维
【6月更文挑战第3天】这是一个JavaScript编程练习集,包含15个题目及答案:计算两数之和、判断偶数、找数组最大值、字符串反转、回文检测、斐波那契数列、数组去重、冒泡排序、阶乘计算、数组元素检查、数组求和、字符计数、数组最值和质数判断以及数组扁平化。每个题目都有相应的代码实现示例。
21 1
|
22天前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
20 2