单位转换需识别数值与单位组合并按比例换算，正则应精准匹配“数字+单位”结构，支持小数、负值、科学计数法及空格，兼顾上下文依赖与边界情况。
理解单位转换的核心逻辑
物理单位转换不是简单替换字符串，而是要识别数值与单位的组合，再按比例换算。比如 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)）应原样保留，不强行解析
