单位转换需识别数值与单位组合并按比例换算，正则应精准匹配“数字+单位”结构，支持小数、负值、科学计数法及空格，兼顾上下文依赖与边界情况。

理解单位转换的核心逻辑

物理单位转换不是简单替换字符串，而是要识别数值与单位的组合，再按比例换算。比如 16px → 1rem（假设根字体为16px），2em → 32px（假设父元素字体为16px）。正则需精准捕获“数字+单位”结构，同时保留小数、负号、空格等合法格式，避免误匹配如 max-width 中的 max 或类名里的 px10。

编写安全匹配的正则模式

推荐使用带边界的捕获组，兼顾常见写法：

• /(\d*\.?\d+)\s*(px|em|rem|vh|vw|%)/gi —— 匹配浮点、整数、带空格或无空格的单位
• 更严格可加词边界：/(?，防止匹配到 <code>100pxClass
• 若需支持科学计数法或负值，扩展为：/(-?\d*\.?\d+(?:e[+-]\d+)?)\s*(px|em|rem|vh|vw|%)/gi

在表单输入中实时转换的实现方式

监听输入事件，在失去焦点（blur）或按键后（input）执行转换，避免过度触发：

• 用 replace() 配合函数回调，对每个匹配项计算新值并拼接单位
• 示例：将所有 px 转为 rem（按 1rem = 16px）：
  inputValue.replace(/(\d*\.?\d+)\s*px/gi, (match, num) => (parseFloat(num) / 16).toFixed(3) + 'rem')
• 注意保留原始空格和大小写；单位统一转小写更稳妥，但输出可按需还原

处理上下文依赖与边界情况

em/rem 的含义依赖 CSS 渲染上下文，纯前端 JS 无法获取真实 computed font-size，因此需约定基准值：

• rem 转换默认以 document.documentElement.style.fontSize 或预设值（如16）为基准
• em 转换需明确父级字体大小，若不可知，建议限制仅用于 rem/px 互转，或要求用户配置参考值
• 跳过无效值：空字符串、0px、非数字前缀（如 calc(10px + 2em)）应原样保留，不强行解析