如何在JavaScript超集中仅替换注释与字符串外的关键字？

核心思路 #

直接全局正则替换会忽略代码的语法上下文，必须通过跟踪当前语法状态（正常代码区、单行注释、多行注释、各类字符串）来精准替换仅处于代码逻辑区的关键字。

实现方案 #

方案1：状态机遍历字符（最可靠） #

通过逐字符扫描维护当前状态，仅在正常代码区时匹配并替换目标关键字，同时处理转义字符、嵌套注释等复杂边缘场景，这也是Babel、TypeScript等工具的核心处理逻辑。

示例代码：

function replaceKeywordOutsideContext(code, targetKeyword, replacement) {
  let result = '';
  let state = 'code'; // 初始状态：正常代码区
  let i = 0;
  const len = code.length;
  const keywordLen = targetKeyword.length;

  while (i < len) {
    // 进入单行注释
    if (state === 'code' && code.slice(i, i+2) === '//') {
      state = 'singleComment';
      result += '//';
      i += 2;
    }
    // 进入多行注释
    else if (state === 'code' && code.slice(i, i+2) === '/*') {
      state = 'multiComment';
      result += '/*';
      i += 2;
    }
    // 退出多行注释
    else if (state === 'multiComment' && code.slice(i, i+2) === '*/') {
      state = 'code';
      result += '*/';
      i += 2;
    }
    // 退出单行注释（遇到换行）
    else if (state === 'singleComment' && code[i] === '\n') {
      state = 'code';
      result += '\n';
      i += 1;
    }
    // 切换双引号字符串状态
    else if ((state === 'code' || state === 'doubleQuote') && code[i] === '"') {
      state = state === 'code' ? 'doubleQuote' : 'code';
      result += '"';
      i += 1;
      // 处理转义双引号
      if (state === 'doubleQuote' && code[i] === '\\' && code[i+1] === '"') {
        result += '\\"';
        i += 2;
      }
    }
    // 切换单引号字符串状态
    else if ((state === 'code' || state === 'singleQuote') && code[i] === "'") {
      state = state === 'code' ? 'singleQuote' : 'code';
      result += "'";
      i += 1;
      // 处理转义单引号
      if (state === 'singleQuote' && code[i] === '\\' && code[i+1] === "'") {
        result += "\\'";
        i += 2;
      }
    }
    // 切换模板字符串状态
    else if ((state === 'code' || state === 'template') && code[i] === '`') {
      state = state === 'code' ? 'template' : 'code';
      result += '`';
      i += 1;
      // 处理转义模板字符串反引号
      if (state === 'template' && code[i] === '\\' && code[i+1] === '`') {
        result += "\\`";
        i += 2;
      }
    }
    // 正常代码区，匹配独立关键字
    else if (state === 'code') {
      if (code.slice(i, i+keywordLen) === targetKeyword) {
        // 确保是独立关键字，避免匹配标识符的一部分（如setter中的set）
        const prevChar = i > 0 ? code[i-1] : '';
        const nextChar = i + keywordLen < len ? code[i+keywordLen] : '';
        if (!/[a-zA-Z0-9_]/.test(prevChar) && !/[a-zA-Z0-9_]/.test(nextChar)) {
          result += replacement;
          i += keywordLen;
          continue;
        }
      }
      result += code[i];
      i += 1;
    }
    // 注释或字符串区，直接追加字符
    else {
      result += code[i];
      i += 1;
    }
  }
  return result;
}

// 使用示例
const testCode = `
// set this to that
/* set inside multi comment */
const str = "set in string";
let singleStr = 'set in single quote';
\`set in template\`
set myVar = 123;
setter = true; // 此处set不会被替换
`;

const transformedCode = replaceKeywordOutsideContext(testCode, 'set', 'var');
console.log(transformedCode);

方案2：复杂正则匹配（适合简单场景） #

通过正则分支优先匹配注释和字符串，仅在非匹配分支中替换关键字。但该方案无法覆盖所有边缘场景（如嵌套注释、复杂转义），仅适合快速原型验证。

示例代码：

function replaceKeywordWithRegex(code, targetKeyword, replacement) {
  const regex = new RegExp(
    `(//.*?$|/\\*[\\s\\S]*?\\*/|"[^"\\\\]*?(\\\\.[^"\\\\]*?)*"|'[^'\\\\]*?(\\\\.[^'\\\\]*?)*'|\`[^\\\\\`]*?(\\\\.[^\\\\\`]*?)*\`)|\\b(${targetKeyword})\\b`,
    'gm'
  );
  return code.replace(regex, (match, skipPart, keyword) => {
    return skipPart ? skipPart : replacement;
  });
}

// 使用示例
const testCode = `
// set this to that
/* set inside multi comment */
const str = "set in string";
let singleStr = 'set in single quote';
\`set in template\`
set myVar = 123;
setter = true;
`;

console.log(replaceKeywordWithRegex(testCode, 'set', 'var'));

注意事项 #

• 状态机方案是工业级工具的标准实现，能处理所有JS语法边缘情况，推荐用于正式项目。
• 正则方案简洁但有局限性，无法处理嵌套注释、复杂转义组合等场景。
• 替换时必须添加单词边界判断，避免误替换包含关键字的标识符（如setter）。

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