[原簡書]將內聯樣式的px轉化為rem

mindwind 發布于2019-08-26 12:15 / 3131人閱讀

摘要：顯然，編輯器復制過去的代碼的樣式是內聯樣式，但我們的是將文件統一處理，單位轉化為實現自適應布局。由于內聯樣式無法被轉化，所以該需求簡化為就是將內聯樣式的轉化為。

將之前寫在簡書的文章搬過來，荒廢了一段時間，抓緊時間充電

最近有個需求，運營希望將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格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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