JS正则表达式实战：核心语法解析

JS中的正则表达式实例集锦：

部分	语法类型	核心含义
`/.../`	定界符	正则表达式的边界标识（JavaScript/Perl 等语言的标准写法），包裹正则主体。
`\.`	转义字符	匹配字面量的点号 `.` 。⚠️ 重点：正则中 `.` 是通配符（匹配任意单个字符），必须用 `\` 转义才能匹配实际的 `.`。
`()`	分组符	正则的 "分组" 语法，作用是：1. 把括号内的内容视为一个整体；2. 捕获匹配到的内容（可通过 $1/$ 2 等引用）；⚠️ 这里括号内是空的，意味着 "匹配空内容"。
`$`	锚点	匹配字符串的结束位置，确保 `$` 前面的内容必须出现在字符串最后。

匹配 / 不匹配示例

javascript

复制代码

// 示例1：匹配 .txt 结尾的文件（把空分组换成 txt）
const reg1 = /\.(txt)$/;
console.log(reg1.test("note.txt")); // true
console.log(reg1.test("note.txt.bak")); // false（结尾不是 .txt）

// 示例2：匹配 .json 或 .yml 结尾的文件（分组内加或逻辑）
const reg2 = /\.(json|yml)$/;
console.log(reg2.test("config.json")); // true
console.log(reg2.test("docker.yml")); // true
console.log(reg2.test("data.csv")); // false

？正则表达式

用法 1：匹配「前面的字符 / 分组」0 次或 1 次（最基础）

这是你之前在 woff2? 中看到的用法，也是最常用的。

语法：字符? 或 (分组)?
含义：表示它前面紧邻的那个字符 / 分组是「可选的」------ 匹配 0 次（没有）或 1 次（有）。
示例：

复制代码

  const reg = /^86?1[3-9]\d{9}$/;

  // 不带区号的 11 位手机号（正常场景）
  console.log(reg.test('13800138000')); // false
  console.log(reg.test('19912345678')); // false

  // 带 86 区号的手机号
  console.log(reg.test('8613800138000')); // true
  console.log(reg.test('8617788990011')); // true

  // 示例1：匹配 color 或 colour（英式拼写）
  const reg1 = /colou?r/;
  console.log(reg1.test('color'));  // true（u 出现 0 次）
  console.log(reg1.test('colour')); // true（u 出现 1 次）
  console.log('colouur is :',reg1.test('colouur'));// false（u 出现 2 次）

  // 示例2：匹配手机号（可选带区号 86）
  const reg2 = /^86?1[3-9]\d{9}$/;
  console.log('13800138000 is :',reg2.test('13800138000'));  // false（86 出现 0 次）
  console.log(reg2.test('8613800138000')); // true（86 出现 1 次）
  console.log(reg2.test('88613800138000'));// false（86 多了个 8）

用法 2：将「贪婪匹配」转为「非贪婪匹配」（重要）

正则默认是「贪婪模式」（尽可能多匹配），? 加在 */+/?/{n,m} 后，会变成「非贪婪模式」（尽可能少匹配）。

语法：*? / +? / ?? / {n,m}?
含义：匹配到满足条件的「最短内容」就停止。

示例：

javascript

复制代码

const str = '<div>内容1</div><div>内容2</div>';

// 贪婪匹配（默认）：匹配从第一个 <div> 到最后一个 </div> 的所有内容
const regGreedy = /<div>.*<\/div>/;
console.log(str.match(regGreedy)[0]); 
// 输出：<div>内容1</div><div>内容2</div>

// 非贪婪匹配（加?）：匹配第一个 <div> 到最近的 </div>
const regNonGreedy = /<div>.*?<\/div>/;
console.log(str.match(regNonGreedy)[0]); 
// 输出：<div>内容1</div>