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

mindwind 发布于2019-08-26 12:15 / 3083人阅读

摘要：显然，编辑器复制过去的代码的样式是内联样式，但我们的是将文件统一处理，单位转化为实现自适应布局。由于内联样式无法被转化，所以该需求简化为就是将内联样式的转化为。

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

最近有个需求，运营希望将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: "

"类似这样的字符串，将其格式化

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

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

GPU云服务器云服务器将语音转化为文字的软件原简书 js将数据转化为json js将数据转化为json格式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108323.html

【整理】20个让你效率更高的CSS代码技巧

摘要：使用进行布局弹性布局的出现是有原因的。对于大型项目使用预处理器你一定听说过它们。预处理器是的未来。举个简单的例子，下面是一个代码的片段，它使用到了一些变量和函数预处理器的唯一的不足之处是它们任然需要编译在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识...

hqman 2019-08-30 11:14 评论0 收藏0
【整理】20个让你效率更高的CSS代码技巧

摘要：使用进行布局弹性布局的出现是有原因的。对于大型项目使用预处理器你一定听说过它们。预处理器是的未来。举个简单的例子，下面是一个代码的片段，它使用到了一些变量和函数预处理器的唯一的不足之处是它们任然需要编译在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识...

AlphaWatch 2019-08-02 15:20 评论0 收藏0
【整理】20个让你效率更高的CSS代码技巧

摘要：使用进行布局弹性布局的出现是有原因的。对于大型项目使用预处理器你一定听说过它们。预处理器是的未来。举个简单的例子，下面是一个代码的片段，它使用到了一些变量和函数预处理器的唯一的不足之处是它们任然需要编译在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识...

NoraXie 2019-08-23 18:13 评论0 收藏0
HTML 1-样式引入、路径、尺寸单位

摘要：样式的引入方式样式的引入有三种方式内联式，可直接写在标签内，一般不建议这种写法。调试介绍主要用于对程序调试，相比于，仅在控制台中打印相关信息，不会阻断程序的执行。 CSS样式的引入方式 css样式的引入有三种方式：1.css内联式，可直接写在html标签内，一般不建议这种写法。这里文字是红色 2.css嵌入式，CSS代码写在标签中并放在head标签内 p{ font-si...

Shihira 2019-08-29 15:27 评论0 收藏0
HTML 1-样式引入、路径、尺寸单位

摘要：样式的引入方式样式的引入有三种方式内联式，可直接写在标签内，一般不建议这种写法。调试介绍主要用于对程序调试，相比于，仅在控制台中打印相关信息，不会阻断程序的执行。 CSS样式的引入方式 css样式的引入有三种方式：1.css内联式，可直接写在html标签内，一般不建议这种写法。这里文字是红色 2.css嵌入式，CSS代码写在标签中并放在head标签内 p{ font-si...

laoLiueizo 2019-08-02 10:28 评论0 收藏0