js解析html字符串为虚拟dom--虚拟节点（栈思想实现）

最近在用vue3开发svg图标组件，使用webpack读取到svg内容后利用正则移除掉了
SIGN_END: "SIGN_END", // 结束标签读取如
SIGN_END_OK: "SIGN_EN_OK", // 结束标签读取完成
SIGN_START: "SIGN_START", // 开始标签读取如
SIGN_START_OK: "SIGN_START_OK", // 开始标签读取完成
};
function htmlStrParser(htmlStr) {
const str = htmlStr.replace(/\n/g, "");
let result = { nodeName: "root", children: [] };
// 默认 result.children[0]插入, ，这里记录调试用的栈信息
let use_line = [0];
let current_index = 0; // 记录当前插入children的下标
let node = result; // 当前操作的节点
let sign = ""; // 标记标签字符串（可能包含属性字符）、文本信息
let status = ""; // 当前状态，为空的时候我们认为是在读取当前节点（node）的文本信息
for (var i = 0; i < str.length; i++) {

var current = str.charAt(i);
var next = str.charAt(i + 1);
if (current === "<") {
  // 在开始标签完成后记录文本信息到当前节点
  if (sign && status === sign_enum.SIGN_START_OK) {
    node.text = sign;
    sign = "";
  }
  // 根据“）读取中  还是开始的标签() 读取中
  if (next === "/") {
    status = sign_enum.SIGN_END;
  } else {
    status = sign_enum.SIGN_START;
  }
} else if (current === ">") {
  // () 读取中，遇到“>”， () 读取中完成
  if (status === sign_enum.SIGN_START) {
    // 记录当前node所在的位置，并更改node
    node = result;
    use_line.map((_, index) => {
      if (!node.children) node.children = [];
      if (index === use_line.length - 1) {
        sign = sign.replace(/^\s*/g, "").replace(/\"/g, "");
        let mark = sign.match(/^[a-zA-Z0-9]*\s*/)[0].replace(/\s/g, ""); // 记录标签
        // 标签上定义的属性获取
        let attributeStr = sign.replace(mark, '').replace(/\s+/g, ",").split(",");
        let attrbuteObj = {};
        let style = {};
        attributeStr.map(attr => {
          if (attr) {
            let value = attr.split("=")[1];
            let key = attr.split("=")[0];
            if (key === "style") {
              value.split(";").map(s => {
                if (s) {
                  style[s.split(":")[0]] = s.split(":")[1]
                }
              })
              return attrbuteObj[key] = style;
            }
            attrbuteObj[key] = value;
          }
        })
        node.children.push({ nodeName: mark, children: [], ...attrbuteObj })
      }
      current_index = node.children.length - 1;
      node = node.children[current_index];
    });
    use_line.push(current_index);
    sign = "";
    status = sign_enum.SIGN_START_OK;
  }
  // () 读取中，遇到“>”， () 读取中完成
  if (status === sign_enum.SIGN_END) {
    use_line.pop();
    node = result;
    // 重新寻找操作的node
    use_line.map((i) => {
      node = node.children[i];
    });
    sign = "";
    status = sign_enum.SIGN_END_OK;
  }
} else {
  sign = sign + current;
}

}
return result;
}

console.log(htmlStrParser(htmlStr))上面代码中给解析的节点都设置了一个状态，这一点至关重要，这是我之前没有想到的，有了解析状态就能知道遇到的字符串是节点的属性，还是节点的文本，还是节点的子节点。“栈”思想“栈”的特性：先进后出（栈只有一个入口和出口，入口就是出口）现实生活中的物体描述栈：乒乓球桶，它只有一端可以打开，另一端是封闭的，最先放进去的乒乓球最后才能拿的出来数据结构：在JavaScript中实现“栈”的最好数据结构是数组思路定义节点解析状态。 0--开始标签解析中，。 1--开始标签解析完成。 2--结束标签解析中。 3--结束标签解析完成定义一个结果数组，用来存储最终解析的虚拟dom定义一个栈数组，用来存储当前正在解析的节点，遇到一个节点就往该数组中push进去，节点解析完成后需及时将其移出栈定义一个变量(比如: remainderHtml)用来存储剩余html字符串，该变量的初始值为待解析的html字符串定义一个变量用来存储当前截取的字符串（比如：currentChars）定义一个变量用来存储引号数量使用whlile循环remainderHtml，每循环一次取出字符串的第一个字符，然后判断该字符如果第一个字符是“<”号可能遇到了新标签，此时需创建虚拟dom并记录标签名、状态、节点类型、attrs、children等信息，并添加到栈顶可能遇到了注释节点，此时需创建虚拟dom并记录标签名、状态、节点类型、children等信息，并添加到栈顶如果栈顶有节点，且节点的状态为1，可能遇到了节点的结束标签，如果是，那么此时就需要将其移出栈顶如果栈顶有节点，且节点的状态为1，如果currentChars有值，那么该值可能是节点的文本如果第一个字符是“=”号如果栈顶节点的解析状态为0并且没有被引号引起，那么表示遇到了节点属性，currentChars为节点的属性名如果第一个字符是“空格”如果栈顶节点的解析状态为0并且没有被引号引起，那么表示遇到了节点属性的结束如果第一个字符是“引号”如果currentChars的最后一个字符不是“/”，那么表示遇到了节点属性值的结束如果第一个字符是“>”如果栈顶节点状态为0，并且没有被引号引起，那么有可能是双标签节点的开始标签解析结束，也有可能是单标签节点解析完成，单标签节点移除栈顶如果栈顶节点状态为1，并且没有被引号引起，并且currentChars的最后两个字符为“--”，此时注释节点就解析完成了，注释节点移除栈顶其他情况，currentChars += 第一个字符代码实现function html2vDom(htmlStr) {

var tagNameRegexp = /^([xa-zA-Z0-9\-_$]+)\s/; // 截取标签名称正则
var tagNameRegexp2 = /^([a-zA-Z0-9\-_$]+)\s*>/; // 截取标签名称正则
let endTagNameRegexp = /^\/([a-zA-Z0-9\-]+)>/; // 截取结束标签名正则，如:/div>、/div>fsdfsdf>dfsdf
let attrSplitor = '|=__=|'; // 属性名与属性值的分割符
var vdomResult = [];
var domStack = []; // 当前dom栈
var remainderHtml = htmlStr; // 剩余的字符串
let quotCount = 0; // 引号数量
var currentChars = '';
let attrName = ''; // 标签属性名
//往栈顶节点添加文本节点
let appendTextNode = function (domStackTop) {
    if (currentChars.length === 0) {
        return;
    }
    let text = currentChars.trim();
    console.log('遇到了文本节点：', currentChars, domStackTop);
    if (text.length === 0) { // 如果文本节点全是空格，则只保留一个有效空格，因为html规范如此
        text = ' ';
    }
    if (domStackTop) {
        if (domStackTop.nodeType == 8 && text.substr(-2) == '--') {
            text = text.substr(0, text.length - 2);
        }
        domStackTop.children.push({
            nodeType: 3,
            status: 3,
            text: text
        });
        currentChars = '';
    }
}
while (remainderHtml.length > 0) {
    let firstChar = remainderHtml.charAt(0);
    remainderHtml = remainderHtml.substr(1);
    console.log('firstchar', firstChar);
    let domStackTop = domStack[domStack.length - 1]; // 获取栈顶元素
    let domStackTopStatus = domStackTop && domStackTop.status;
    console.log('currentChars', currentChars);
    if (firstChar === '<' && quotCount == 0) {
        console.log('遇到“<”号，并且没有被引号引起', tagNameRegexp.test(remainderHtml), remainderHtml);
        if (domStackTopStatus == 1 && endTagNameRegexp.test(remainderHtml)) { // 如果栈顶节点已经解析完开始标签，此时遇到“<”则判断是否该开始解析结束标签了
            let endTagName = RegExp.$1;
            if (endTagName === domStackTop.nodeName) { // 如果结束标签与开始标签相等则该标签解析完成
                console.log('【' + endTagName + '】标签解析结束');
                // 结束标签解析完成前若有字符都视为节点的文本
                appendTextNode(domStackTop);
                domStackTop.status = 3;
                currentChars = '';
                domStack.pop();
                console.log('【' + endTagName + '】标签解析结束后的栈顶：', domStack.slice());
                // 1 + endTagName.length + 1 = ('/' + 标签名 + '>')
                remainderHtml = remainderHtml.substr(1 + endTagName.length + 1);
                continue;
            }
        }
        if (domStackTop && domStackTop.status == 1) { // 遇到节点的文本节点
            // 开始标签解析完成后，遇到下一个节点开始标签前的内容视为当前节点文本
            appendTextNode(domStackTop);
        }
        if (tagNameRegexp.test(remainderHtml) || tagNameRegexp2.test(remainderHtml)) { // 如果第一个字符是“<”并且可以获取标签名称则表示遇到了一个节点（这2个正则的判断顺序别弄错了，否责会解析错误）
            let tagName = RegExp.$1;
            console.log('遇到新标签：', tagName, domStackTop);
            let vdom = {
                nodeName: tagName,
                nodeType: 1, // 1--dom节点，3--文本节点，8--注释节点
                attrs: {},
                status: 0, // 标签解析状态，0--开始标签解析中，1--开始标签解析完成，2--结束标签解析中，3--结束标签解析完成
                children: []
            }
            if (vdomResult.length == 0 || !domStackTop) {
                vdomResult.push(vdom);
            }
            if (domStackTop) {
                domStackTop.children.push(vdom);
            }
            domStack.push(vdom);
            remainderHtml = remainderHtml.substr(tagName.length);
        } else if (remainderHtml.substr(0, 3) == '!--') { // 如果后面3个字符为“!--”表示遇到了注释节点
            console.log('遇到注释节点');
            let vdom = {
                name: 'comment',
                nodeType: 8, // 1--dom节点，3--文本节点，8--注释节点
                status: 1, // 标签解析状态，0--开始标签解析中，1--开始标签解析完成，2--结束标签解析中，3--结束标签解析完成
                children: []
            }
            if (vdomResult.length == 0 || !domStackTop) {
                vdomResult.push(vdom);
            }
            if (domStackTop) {
                domStackTop.children.push(vdom);
            }
            domStack.push(vdom);
            remainderHtml = remainderHtml.substr(3);
        } 
    
        // return;
    }  else if (firstChar === '=') { // 遇到"="号
        console.log('遇到了等于号', domStackTopStatus, domStackTopStatus, quotCount);
        if (domStackTopStatus == 0 && quotCount == 0) { // 处于开始标签解析中，此时遇到等于号表示遇到了节点属性的开始
            currentChars += attrSplitor;
        } else {
            currentChars += firstChar;
        }
    }  else if (firstChar === ' ' && domStackTopStatus == 0 && quotCount == 0) { // 开始标签解析中遇到了空格
        console.log('遇到了空格', domStackTopStatus, domStackTopStatus, quotCount);
        let nextChar = remainderHtml.charAt(0);
         
        if (nextChar != ' ') { // 如果下一个字符不是空格，说明currentChars为节点的属性并且是没有属性值的属性
            let attr = currentChars.trim();
            if (attr.length > 0) {
                console.log('添加没有属性值的属性：', currentChars.trim());
                domStackTop.attrs[currentChars.trim()] = void 0;
                currentChars = '';
            }
        } else {
            currentChars += firstChar;
        }
    } else if (firstChar === '"' && currentChars.charAt(currentChars.length - 1) != '\\') { // 遇到双引号并且引号没有被注释
        console.log('遇到了引号', domStackTopStatus);
        if (domStackTopStatus == 0) { // 处于开始标签解析中，此时遇到引号表示遇到了节点的属性值的开始或结束
            quotCount += 1;
            if (quotCount == 2 && currentChars.indexOf(attrSplitor) > -1) { // 凑成一对引号，此时读取属性值结束
                let attrInfo = currentChars.split(attrSplitor);
                let domAttrName = (attrInfo[0] || '').trim();
                console.log('attrInfo', attrInfo);
                // 设置属性及属性值
                if (domAttrName) {
                    domStackTop.attrs[domAttrName] = attrInfo[1];
                }
                currentChars = '';
                quotCount = 0;
            }
        } else {
            currentChars += firstChar;
        }
    } else if (firstChar == '>') { // 遇到">"号
        console.log('遇到了“>”号', domStackTopStatus);
        let currentCharLast = currentChars.charAt(currentChars.length - 1);
        if (domStackTopStatus == 0 && quotCount == 0) { // 处于开始标签解析中，并且不在引号中，说明此时遇到了开始标签的结束
            if (currentCharLast === '/') { // 如果最后个字符为“/”表示遇到了单标签的结束
                console.log('【' + domStackTop.nodeName + '】单标签解析结束！');
                let remainderChars = currentChars.substr(0, currentChars.length - 1).trim();
                if (remainderChars.length > 0) { // 如果还有剩余字符则当做节点的属性
                    console.log('单标签节点添加没有属性值的属性：', remainderChars);
                    domStackTop.attrs[remainderChars] = void 0;
                }
                domStackTop.status = 3; // 设置节点状态为已完成
                domStack.pop(); // 栈顶节点出栈
            } else { // 开始标签的结束
                console.log('开始标签的结束', domStackTop);
                let remainderChars = currentChars.trim();
                if (remainderChars.length > 0) {
                    console.log('开始标签的结束前还有字符，当做没有属性值的属性：', remainderChars);
                    domStackTop.attrs[remainderChars] = void 0;
                }
                domStackTop.status = 1;
            }
            currentChars = '';
        } else if (domStackTopStatus == 1 && quotCount == 0 && currentChars.substr(-2) == '--') { // 如果最后2个字符为“--”表示遇到了注释节点的结束
            console.log('注释节点解析结束！', currentChars);
                appendTextNode(domStackTop);
                domStackTop.status = 3;
                domStack.pop();
        } else {
            currentChars += firstChar;
        }
    } else {
      currentChars += firstChar;
    }
}
console.log('解析结果：', vdomResult);
return vdomResult;

}经我使用简单的、复杂的、vue语法的html字符串测试，均能按预期解析成功，下面是我测试的字符串：var svgStr1 = '';
var svgStr2 = '';
var svgStr3 = `

`;

var svgStr4 = `
class="icon-item"
v-for="iconInfo in (visibledIconType === 'outlined' ? outlinedIcons : filledIcons)"
:key="iconInfo.name">

:icon-name="iconInfo.name"
:is-filled="iconInfo.isFilled"
:svg-content="iconInfo.childrenContent">

`;
var svgStr5 = `

`
var html1 = `

`;
var html2 = `

`;
var html3 = `

`;
var vueTemp1 = `

class="secret-create-form"
ref="secretCreateForm"
:items="formItems"
:rules="rules"
:data.sync="requestData"
:showConfirm="false"
:showReset="false"
:labelWidth="labelWidth"
v-loading="!!(committing && !setParentLoading) || loading"
:element-loading-text="!!(committing && !setParentLoading) ? '提交中...' : (loading ? '加载中...' : '')"
@submit="submitData"
@select="selectChange">

`;下图是解析变量html2的结果：

如代码有bug欢迎大佬评论指正！

js解析html字符串为虚拟dom--虚拟节点（栈思想实现）

你可能感兴趣的:(javascript)