如何替换富文本里的px为vw

初级

适合简单的文本内容，但遇到图片链接、a链接时也会去匹配替换，从而使链接失效。

html = html?.replace(/((\d+)px|(\d+)\.(\d+)px)/g, (s, t) => {
      s = s.replace("px", "");
      let value = px2vw(s);
      return value + "vw";
    });

进阶

将匹配替换的范围限定在 style 里，从而避免影响到其它地方。

html = html?.replace(
      /style='[^\']*?'|style="[^\"]*?"/g,
      (match, capture) => {
        match = match?.replace(/((\d+)px|(\d+)\.(\d+)px)/g, (s, t) => {
          s = s.replace("px", "");
          let value = px2vw(s);
          return value + "vw";
        });
        return match;
      }
    );

转换方法

/**
 * px 转 vw
 * @param {number} value 要转化的px值
 * @param {object} option { @param length 转换后的精度，即小数点位数 @param viewportWidth UI设计稿的宽度 }
 * @returns number
 */
export function px2vw(value, option = {}) {
  let { length = 6, viewportWidth = 390 } = option;
  const vw = (value / (viewportWidth / 100)).toFixed(length);
  return Number(vw);
}