ウィジェット自動分離css

に質問

仕事の中でいつも小さいプログラムのページを书く必要があるため、しかし1つのページを书く时通常htmlの构造を书いて更にcssを书くことができて、过程の中で要素の类名を忘れないではいけなくて、2つのファイルの中で时々の切替は切り替えていって、しかし直接行内の様式の书き方を使うならば、どんな悪いことがありますみんなはすべて知っています...そこで私にとって行内スタイルの書き方を採用し、htmlとcssを分離できるようになれば出てくるので、何時間もかけて小さなツールを書きました.https://www.npmjs.com/package/onetotwo.△まだ完備していないので、私の最も基礎的な需要を一時的に満たすしかありません.キックアスたちを忘れて許してください.

紹介する

そこで、ここで解決しなければならない一般的な問題はhtml構造をどのように解析し、私が望んでいるデータ構造に変換するかです.以下は簡易版実装です.主な実装はhtml文字列を1つずつ読み取ることです.<文字がラベル解析として扱われ、>文字に出会うまで、ラベルのstyleとclass属性を解析し始めます.コードは次のとおりです.

const [Node, Tree] = require('./tree');

function parse(html, _callback) {

    //    html         

    html = html.replace(//g, '');

    html = html.replace(/>\s+([^\s$1') {

                const style_regex = /\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)'|([^'">\s]+))/ig;

                const class_regex = /\bclass\s*=\s*(?:"([^"]*)"|'([^']*)'|([^'">\s]+))/ig;

                const class_result = class_regex.exec(__tag_all_content);

                const style_result = style_regex.exec(__tag_all_content);

                const tag_name = __tag_all_content.replace(/\s.*/g, '');

                const class_name = class_result && (class_result[1] || class_result[2] || class_result[3]);

                const style = style_result && (style_result[1] || style_result[2] || style_result[3]);

                if (!__have_root) {

                    __tree.root = { tag: tag_name, parent: null, child: [], hierarchy: 0 };

                    __current_node = __tree.root;

                    __have_root = true;

                }else {

                    let new_node = { tag: tag_name, parent: __current_node, child: [], hierarchy: __stack.length};

                    __current_node.child.push(new_node);

                    __current_node = new_node;

                }

                class_name && (__current_node.class_name = class_name);

                style && (__current_node.style = style);

                __stack.push(__current_node);

                __tag_all_content = '';

                return parse_text;

            }

            __tag_all_content += token;

            return parse_begin_tag;

        }

        //       
        function parse_end_tag(token) {

            if (token === '>') {

                if (__current_node.tag !== __tag) {

                    console.log('\x1b[31m >>>' + 'Wrong closed tag at char ' + __i + '\x1b[39m');

                }

                __tag = '';

                __stack.pop();

                __current_node = __current_node.parent;

                return parse_text;

            }

            __tag += token;

            return parse_end_tag;

        }

        function parse_text(token) {

            if (token === '