如何用JavaScript移除CSS注释？需规避URL等特殊场景

纯正则表达式很难准确处理包含https://、url(//xxx)这类特殊URL的CSS注释移除——因为URL里的/*或*/会被误判为注释的起止符，导致错误删除有效内容。这里给你一个基于状态机的纯JavaScript实现，不用依赖任何第三方库，精准度更高：

function removeCssComments(css) {
  let result = '';
  let inComment = false;
  let inString = false;
  let inUrl = false;
  let stringQuote = '';
  let urlParenCount = 0;

  for (let i = 0; i < css.length; i++) {
    const char = css[i];
    const nextChar = css[i + 1];

    if (!inComment) {
      // 处理字符串（"" 或 ''）
      if ((char === '"' || char === "'") && !inUrl) {
        if (!inString) {
          inString = true;
          stringQuote = char;
        } else if (stringQuote === char) {
          inString = false;
        }
        result += char;
        continue;
      }

      // 处理url()函数
      if (!inString && char === 'u' && css.slice(i, i + 3) === 'url') {
        inUrl = true;
        result += char;
        continue;
      }
      if (inUrl) {
        if (char === '(') urlParenCount++;
        if (char === ')') {
          urlParenCount--;
          if (urlParenCount === 0) inUrl = false;
        }
        result += char;
        continue;
      }

      // 检测注释开始
      if (char === '/' && nextChar === '*') {
        inComment = true;
        i++; // 跳过下一个*
        continue;
      }

      result += char;
    } else {
      // 检测注释结束
      if (char === '*' && nextChar === '/') {
        inComment = false;
        i++; // 跳过下一个/
      }
    }
  }

  return result;
}

使用示例 #

假设你的CSS代码是：

/* 这是全局样式注释 */
body {
  background: url(//example.com/*bg-img*/.jpg); /* 背景图注释 */
  color: #333; /* 文字颜色 */
  font-family: "/*Custom Font*/", sans-serif;
}

调用函数后得到的结果：

body {
  background: url(//example.com/*bg-img*/.jpg);
  color: #333;
  font-family: "/*Custom Font*/", sans-serif;
}

这个函数通过跟踪当前处于字符串、url函数还是正常状态，能精准避开这些特殊场景，只移除真正的CSS注释。

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