如何使用JavaScript移除内联样式中的空白字符？

方案一：正则表达式批量处理 #

用正则一次性清理所有冗余空白，同时保留CSS规则的必要格式，代码更简洁高效：

const rawStyle = styleEl.getAttribute('style');
const cleanedStyle = rawStyle
  .replace(/\s+/g, ' ') // 把所有连续空白（换行、空格、制表符）替换为单个空格
  .trim() // 清除首尾空格
  .replace(/;\s*/g, '; ') // 分号后统一加单个空格
  .replace(/\s*:/g, ': ') // 冒号后统一加单个空格
  .replace(/\s*;\s*$/, ';'); // 确保末尾只有一个分号

styleEl.setAttribute('style', cleanedStyle);

无需拆分再拼接，直接通过正则批量处理，避免了拆分空规则的额外判断逻辑。

方案二：利用浏览器CSSOM自动整理（最稳妥） #

浏览器本身会自动解析并规范CSS格式，直接借助元素的style对象读取再重新设置，完全不用自己处理边界情况：

const styleObj = styleEl.style;
const cleanedStyle = Array.from(styleObj)
  .map(prop => `${prop}: ${styleObj.getPropertyValue(prop)}`)
  .join('; ');

styleEl.setAttribute('style', cleanedStyle);

浏览器会按照标准CSS格式输出，不用担心变量、特殊值的空格处理出错，逻辑更直观。

对比原有方案 #

你之前的拆分拼接方式，容易出现空规则过滤的额外逻辑，上面两种方法不仅代码量更少，还能避免拆分带来的潜在问题，效率和可读性都更优。

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