手写AST(抽象语法树)

// 将字符串的属性转换为key：value类型
        const convert = (attr) => {
            if (attr == undefined) {
                return [];
            } else {
                let point = 0;
                let flag = false;
                let result = [];
                for (let i = 0; i < attr.length; i++) {
                    if (attr[i] == '"') {
                        flag = !flag;
                    } else if (!flag && attr[i] == ' ') {
                        if (!/^\s*$/.test(attr.slice(point, i))) {
                            result.push(attr.slice(point, i).trim());
                            point = i;
                        }
                    }
                }
                result.push(attr.slice(point, attr.length).trim());
                result = result.map((item) => {
                    let res = item.match(/^(.+)="(.+)"$/);
                    return {
                        name: res[1],
                        value: res[2]
                    }
                })
                return result;
            }
        }
        // 将模板dom转换为对象的形式，以AST的形式实现
        function prase(template) {
            let startStark = [];
            let endStark = [{ children: [] }];
            let startReg = /^\<([a-z]+[1-6]?)(\s[^\<]+)?\>/;   //开始标签的正则
            let endReg = /^\<\/([a-z]+[1-6]?)+\>/;   //结束标签的正则
            let innerReg = /^([^\<]+)\<\/[a-z]+[1-6]?\>/;
            let attrReg = /^\"(a-z)+\"/;
            let i = 0;
            let rest = template;
            while (i < template.length - 1) {
                rest = template.substring(i);
                // 匹配开始标签
                if (startReg.test(rest)) {
                    // 把开始的标签提取出来
                    let tag = rest.match(startReg)[1];
                    let attr = rest.match(startReg)[2];
                    let attrs = convert(attr);
                    let attrLen = attr != undefined ? attr.length : 0;
                    // push到startStark栈中
                    startStark.push(tag);
                    // 结束标签push一个空栈顶用来存放，内容
                    endStark.push({ tag: tag, children: [], attrs: attrs });
                    // 加2是因为<>
                    i += tag.length + 2 + attrLen;
                    // 匹配结束标签
                } else if (endReg.test(rest)) {
                    // 把结束的标签提取出来
                    let tag = rest.match(endReg)[1];
                    // 判断是否是封闭标签，如果是，就去除栈顶
                    if (startStark[startStark.length - 1] === tag) {
                        // 去除开始标签
                        startStark.pop();
                        // 在下面检查到内容字符之后，检测到闭标签时弹栈，弹出的数组包含了内容字符
                        let pop_arr = endStark.pop();
                        // 把弹出栈的元素push给新的栈顶元素
                        endStark[endStark.length - 1].children.push(pop_arr);
                    } else {
                        new Error(startStark[startStark.length - 1] + '没有封闭');
                    }
                    // 加3是因为</>
                    i += tag.length + 3;
                    // 匹配是否是内容字符且不为空内容
                } else if (innerReg.test(rest)) {
                    // 把文本节点的内容提取出来
                    let inner = rest.match(innerReg)[1];
                    // 判断是否为空
                    if (!/^\s+$/.test(inner)) {
                        // 栈顶的元素push进去该文本节点
                        endStark[endStark.length - 1].children.push({ text: inner, type: 3 });
                    }
                    i += inner.length;
                }
                else {
                    i++;
                }
            }
            return endStark[0].children[0];
        }
        prase(`<div>
            <h3 class="box" id="box2">你好</h3>
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ul>
        </div>`);