JavaScript 正则表达式核心用法与实战解析

结果或目标

掌握 JavaScript 中正则表达式的构建规范，理解不同方法在处理全局匹配、捕获组替换时的行为差异，并能编写安全高效的字符串处理函数。

准备条件

在 JavaScript 环境中，正则表达式主要由 RegExp 对象表示。开发者需熟悉基础的字符串操作概念，了解“贪婪性”（默认匹配最长）与“懒惰性”（配合 /g 或特定修饰符控制迭代）的基本特性。

真实操作顺序

第1步：选择正则表达式的定义方式

目的：根据需求选择最合适的模式书写格式。
动作：
1. 字面量形式：适用于模式固定且无需动态生成的场景。格式为 /pattern/flags。
2. 构造函数形式：适用于模式中包含变量或动态拼接的场景。使用 new RegExp('pattern', 'flags')。
重要参数：Flags 支持 g (全局匹配), i (忽略大小写), m (多行模式)。
注意：在构造函数中，元字符需要双重转义。例如字面量的 /\d/ 对应构造函数的 '\\d'。

// 字面量写法：无法直接使用外部变量
var pattern1 = /at/g;

// 构造函数写法：支持变量拼接
function getByClass(obj, classname){
  var elements = obj.getElementsByTagName('*');
  var result = [];
  // 注意双重转义：正则中的空格需写成 \\s
  var pattern = new RegExp('(^|\\s)'+ classname + '(\\s|$)');
  for(var i = 0; i < elements.length; i++){
    if(pattern.test(elements[i].className)){
      result.push(elements[i]);
    }
  }
  return result;
}

第2步：掌握核心元字符与量词语法

目的：精确描述待匹配的子串特征。
入口：编写 pattern 字符串。
关键符号：
- .： 除换行符外的任意字符
- \d / \D：数字 / 非数字
- \w / \W：字母、数字、下划线 / 其他字符
- ^ / $：字符串开头 / 结尾
- {n,m} / * / + / ?：指定重复次数（量词）
- ()：捕获分组，用于后续引用或提取
完成状态：能够写出识别身份证、邮箱或简单逻辑模式的正则串。

第3步：应用 String 原型方法进行匹配与替换

目的：执行具体的字符串搜索、验证或修改操作。
动作：
1. match()：返回匹配数组。加 /g 时不包含 index/input 属性，返回所有匹配项；不加时仅返回第一个。
2. search()：返回首次匹配的索引位置，未找到返回 -1，不支持回调。
3. replace()：进行文本替换。第二个参数可以是字符串（支持 $1, $& 等引用），也可以是回调函数以便动态计算替换内容。
4. split()：按正则分割字符串为数组。

// replace 使用回调函数实现敏感词过滤
var string = 'FLG是邪教';
var pattern = /FLG|邪教/g;
var result = string.replace(pattern, function($0){
  var s = '';
  for(var i = 0; i < $0.length; i++) {
    s += '*';
  }
  return s;
});
console.log(result); // ***是**

第4步：利用 RegExp 实例方法深入控制匹配流程

目的：获取详细的匹配上下文信息，如捕获组内容和位置。
动作：使用 exec() 和 test()。
- test()：布尔值判断，常置于 if 语句中验证合法性。
- exec()：返回包含匹配信息的数组或 null。在全局模式（/g）下多次调用会更新 lastIndex，实现遍历所有匹配项的效果。
参数说明：返回数组的 index 为起始位置，input 为原字符串，第一项为完整匹配，后续项为捕获组。

// 遍历所有数字及其位置
var string = 'j1h342jg24g234j 3g24j1';
var pattern = /\d/g;
var temp = pattern.exec(string);
var valueArray = [];
var indexArray = [];
while(temp != null){
  valueArray.push(temp[0]);
  indexArray.push(temp.index);
  temp = pattern.exec(string);
}
console.log(valueArray, indexArray);

第5步：处理常见业务场景

目的：将正则能力应用于实际开发痛点。
场景 1：HTML 实体转义（防 XSS）
通过 replace 配合字典逻辑，将特殊字符转为 HTML 实体。

function htmlEscape(text){
  return text.replace(/[<>"&]/g, function(match, pos, originalText){
    switch(match){
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '&': return '&amp;';
      case '"': return '&quot;';
    }
  });
}

场景 2：统一日期格式
利用 $1, $2, $3 引用分组内容，忽略分隔符差异。

function formatDate(date){
  return date.replace(/(\d+)\D+(\d+)\D+(\d+)/, '$1年$2月$3日');
}

场景 3：去除首尾空格（兼容 trim）

' my name is '.replace(/^\s+|\s+$/, '') // 'my name is'

完成判断

当开发者能够正确区分字面量与构造函数的使用场景，熟练运用 match 与 exec 获取结构化数据，并通过 replace 结合正则完成复杂文本清洗时，即标志着已掌握 JavaScript 正则表达式的核心应用。

简要总结

JavaScript 正则表达式是处理字符串的有力工具。通过合理选用 RegExp 的定义方式，深入理解元字符与量词的语义，并结合 String 方法与 RegExp 实例方法，可以解决从简单的格式校验到复杂的 DOM 类名提取及安全防护等各类问题。以上就是 JavaScript 正则表达式核心用法与实战解析的详细内容，更多关于 JavaScript 字符串处理技巧的资料请关注本站其它相关文章！