zoukankan      html  css  js  c++  java
  • html语法树转html

    //html语法树节点类型
    const typeMap= {
        '1':function (node) {
            if(node.attrs&&node.attrs.length>0){
                node.attrs.forEach(function (item) {
                    item.type='attrs'
                })
            }
            return [
                '<',
                node.tag,
                node.staticClass?[' class=',node.staticClass]:'',
                node.attrs&&node.attrs.length>0?[' ',joinSymbol(node.attrs,' ')]:'',
                '>',
                node.children,
                '</',
                node.tag,
                '>',
            ];
        },
        attrs:function (node) {
            return [node.name,'=',node.value]
        },
        '3':function (node) {
            return node.text;
        },
    }
    //语法树转string
    function AstChildToString(children) {
        let str='';
        children.forEach(function (node) {
            str+=AstToHtml(node)
        })
        return str;
    }
    //元素之间添加符号
    function joinSymbol(oriArr,symbol,pre) {
        if(oriArr.length===0){return '';}
        const arr=[];
        if(pre){
            arr.push(pre)
        }
        oriArr.forEach(function (node,i) {
            arr.push(node);
            if(i<oriArr.length-1){
                arr.push(symbol);
            }
        })
        if(pre){
            arr.push(pre)
        }
        return arr;
    }
    //语法树转string
    function AstToHtml(ast){
        if(Object.prototype.toString.call(ast)==='[object Array]'){
            return AstChildToString(ast);
        }else if(Object.prototype.toString.call(ast)==='[object String]'){
            return ast;
        }else if(ast===null){
            return '';
        }
        let code=typeMap[ast.type](ast);
    
        if(Object.prototype.toString.call(code)==='[object Array]'){
            const arr=code.map(function(obj){
                if(Object.prototype.toString.call(obj)==='[object Object]'){
                    return AstToHtml(obj);
                }else if(Object.prototype.toString.call(obj)==='[object Array]'){
                    return AstToHtml(obj);
                }
                return obj;
            })
            return arr.join('');
        }else{
            return code;
        }
    
    }
    module.exports=AstToHtml;

    test.js

    //demo
    const AstToHtml=require('../AstToHtml');
    const getText=require('../utils/getText');
    const compiler = require('vue-template-compiler');
    async function init() {
        const html=await getText('./test.html')
        const htmlAst=compiler.compile(html).ast;
        // console.log(html)
        console.log(AstToHtml(htmlAst))
    }
    init()
  • 相关阅读:
    java之集合Collection 3个例子
    利用 ssh 的用户配置文件 config 管理 ssh 会话
    angularJS--apply() 、digest()和watch()方法
    37.创业团队不是天堂
    Android DiskLruCache 源码解析 硬盘缓存的绝佳方案
    sublime安装AngularJS插件
    angularJS 服务--$provide里factory、service方法
    angularJS--多个控制器之间的数据共享
    angularJS---自定义过滤器
    依赖反转
  • 原文地址:https://www.cnblogs.com/caoke/p/11310204.html
Copyright © 2011-2022 走看看