Angular项目批量替换类名：工具选择与脚本示例需求

一、VSCode扩展方案 #

如果不想写脚本，用VSCode的自带功能或扩展就能快速搞定：

• 自带正则查找替换：打开全局查找替换（Ctrl+Shift+H），勾选「正则表达式」选项。比如要替换old-btn为new-btn，可以用\bold-btn\b作为查找内容（\b确保匹配完整类名，避免误替换包含该字符串的其他内容），输入替换内容后点击「替换全部」。如果有大量类名要替换，可以多次执行，或者用多光标配合批量编辑。
• Replace Rules扩展：可以预先配置JSON格式的替换规则集，一次性执行所有类名替换。适合有几十上百个类名需要映射的场景，配置好后一键运行，不用重复操作。
• Multi Replace扩展：支持导入替换规则列表，支持正则和普通文本替换，界面直观，适合快速批量处理。

二、Node.js脚本实现（适合大规模迁移） #

如果类名映射复杂，或者需要精确控制替换范围，写个Node.js脚本更灵活，下面是可直接复用的示例：

脚本步骤 #

1. 定义类名映射表，把所有需要替换的旧类名和新类名对应起来
2. 遍历项目中需要处理的文件（HTML、TS、SCSS等）
3. 对每个文件内容执行正则替换，确保只匹配完整类名
4. 写入替换后的文件内容

示例脚本 #

const fs = require('fs');
const path = require('path');
const glob = require('glob');

// 1. 配置类名映射和目标文件
const CLASS_MAPPING = {
  'old-container': 'new-container',
  'old-btn-primary': 'new-btn-primary',
  'old-text-muted': 'new-text-secondary',
  // 继续添加更多类名映射
};
// 匹配src下所有HTML、TS、SCSS文件，可根据需求调整路径
const TARGET_FILE_PATTERNS = [
  './src/**/*.html',
  './src/**/*.ts',
  './src/**/*.scss'
];

// 工具函数：转义正则特殊字符（比如类名中的连字符、点号）
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 处理单个文件的替换逻辑
function processFile(filePath) {
  try {
    let content = fs.readFileSync(filePath, 'utf8');
    
    // 遍历所有类名映射，执行替换
    Object.entries(CLASS_MAPPING).forEach(([oldClass, newClass]) => {
      // 使用\b确保匹配完整类名，避免部分匹配（比如old-btn不会替换old-btn-large中的部分）
      const classRegex = new RegExp(`\\b${escapeRegExp(oldClass)}\\b`, 'g');
      content = content.replace(classRegex, newClass);
    });
    
    fs.writeFileSync(filePath, content, 'utf8');
    console.log(`✅ 处理完成：${path.relative(process.cwd(), filePath)}`);
  } catch (err) {
    console.error(`❌ 处理失败 ${filePath}：${err.message}`);
  }
}

// 遍历所有目标文件并执行处理
TARGET_FILE_PATTERNS.forEach(pattern => {
  glob(pattern, (err, files) => {
    if (err) {
      console.error(`读取文件列表失败：${err.message}`);
      return;
    }
    files.forEach(processFile);
  });
});

使用说明 #

1. 在项目根目录创建replace-class-names.js文件，粘贴上述代码
2. 安装依赖：npm install glob --save-dev
3. 调整CLASS_MAPPING和TARGET_FILE_PATTERNS配置，匹配你的实际需求
4. 执行脚本：node replace-class-names.js

注意：执行前建议先提交所有代码到Git，或者备份项目，避免替换错误无法回滚。

内容的提问来源于stack exchange，提问作者Eugeny89