使用正则表达式将后端返回的富文本中的px转换为rem

在vue移动端中，使用pxtorem插件无法将行内样式中的px转换为rem,所以会出现排版错乱的问题，可以使用正则表达是对返回的格式进行处理之后再使用

返回的格式实例

代码

        function convertPxToRem(str) {
            // 获取屏幕宽度
            const screenWidth = window.screen.width;
            // 计算html的fontsize
            const htmlFontSize = (screenWidth / 375) * 16;
            // 匹配所有的px值
            const reg = /(\d+)px/g;
            // 将匹配到的px值转换成rem
            return str.replace(
              reg,
              ($0, $1) => `${parseFloat($1) / htmlFontSize}rem`
            );
          }
          const richText = res.data.data.content;

          const convertedText = convertPxToRem(richText);

          console.log(convertedText);

          // 示例
          this.contant = convertedText;

处理之后的富文本实例

可以发现px已经全部转换为rem了

在vue中可以使用v-html解析富文本

      <div v-html="contant"></div>

如果排版还是错乱，可以跟后端商量一下换一种方法，可以返回一个链接，然后前端只需在页面中内嵌这个网页即可

可以使用iframe标签内嵌网页

<iframe src="链接地址" frameborder="0" class="ifcontant"></iframe>