[原简书]将内联样式的px转化为rem-CSDN博客

本文介绍如何将135编辑器内的排版样式复制并转换为自适应的rem单位，以便在H5应用中使用。通过使用posthtml及相应插件，实现了内联样式的px单位到rem单位的自动转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将之前写在简书的文章搬过来，荒废了一段时间，抓紧时间充电

最近有个需求，运营希望将135编辑器里面的排版可以复制到我们自己的后台，在app端实现排版样式的多样化。显然，135编辑器复制过去的代码的样式是内联样式，但我们的H5是将css文件统一处理，单位px转化为rem,实现自适应布局。由于内联样式无法被转化，所以该需求简化为就是将内联样式的px转化为rem。

参考微信的weixin/posthtml-px2rem的方式，稍微改写一下
通过posthtml处理html,再利用posthtml-attrs-parser插件提取style属性，最后利用正则表达式实现转化

// pxToRem.js
'use strict';
var lodash = require('lodash');
var parseAttrs = require('posthtml-attrs-parser');
var posthtml = require('posthtml');

export default function (str, options) {
    var pxRegex = /(\d*\.?\d+)px/ig;

    options = lodash.extend({
        rootValue: 16, // root font-size
        unitPrecision: 5, // numbers after `.`
        minPixelValue: 0 // set it 2 if you want to ignore value like 1px & -1px
    }, options);

    function createPxReplace(rootValue, unitPrecision, minPixelValue) {
        return function (m, $1) {

            // ignoring `PX` `Px`
            if (m.indexOf('px') === -1) {
                return m;
            }
            if (!$1) {
                return m;
            }
            var pixels = parseFloat($1);

            if (pixels < minPixelValue) {
                return m;
            }
            return toFixed((pixels / rootValue), unitPrecision) + 'rem';
        };
    }

    function toFixed(number, precision) {
        var multiplier = Math.pow(10, precision + 1),
            wholeNumber = Math.floor(number * multiplier);
        return Math.round(wholeNumber / 10) * 10 / multiplier;
    }

    var pxReplace = createPxReplace(options.rootValue, options.unitPrecision, options.minPixelValue);

    return Promise.try(() => {
        return posthtml()
        .use(function(tree) {
           tree.match({attrs: {style: true}}, function (node) {
                var attrs = parseAttrs(node.attrs);
                for (var x in attrs['style']) {
                    if (attrs['style'].hasOwnProperty(x)) {
                        var styleValue = attrs['style'][x];
    
                        // e.g. style="width=10px; width=20px;"
                        if (typeof styleValue == 'object')
                            styleValue = styleValue[styleValue.length - 1];
    
                        var newStyleValue;
                        newStyleValue = styleValue.toString().replace(pxRegex, pxReplace);
    
                        attrs['style'][x] = newStyleValue;
                    }
                }
    
                node.attrs = attrs.compose();
                return node;
            });
        })
        .process(str)
        .then(function(result) {
            return result.html;
        })
    });
};

后端接口请求到的文章内容是content: '<div><div>'类似这样的字符串，将其格式化

import pxToRem from 'px-to-rem.js';

pxToRem(str).then(res => { this.content = res; })