最近在用vue3开发svg图标组件，应用webpack读取到svg内容后利用正则移除掉了<svg>，失去了<svg>的子节点，本打算用vue的render函数创立一个svg标签，而后再以innerHTML的形式将svg的子节点插入进去，可我究竟还是太年老了，以innerHTML模式将svg子节点插入进去后并没有成果，图标渲染不进去，于是乎就想到了将字符串的svg解析成虚构节点。
一开始本不打算本人去写代码解析，因为这事挺麻烦，于是就去“百度”，找到了一份大佬写的解析html为虚构dom的代码，但这位大佬的代码有bug还不够欠缺（当遇到简单点的属性时解析不正确，因为他是用正则去匹配标签的属性的，没有思考到简单属性的状况），代码见下：
let sign_enum = { SIGN_END: "SIGN_END", // 完结标签读取 如 </xxxxx> SIGN_END_OK: "SIGN_EN_OK", // 完结标签读取实现 SIGN_START: "SIGN_START", // 开始标签读取 如 <xxxxx> 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 = ""; } // 依据“</”来辨别是 完结标签的（</xxx>）读取中 还是开始的标签(<xxx>) 读取中 if (next === "/") { status = sign_enum.SIGN_END; } else { status = sign_enum.SIGN_START; } } else if (current === ">") { // (<xxx>) 读取中，遇到“>”， (<xxx>) 读取中实现 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; } // (</xxx>) 读取中，遇到“>”， (</xxx>) 读取中实现 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 = '<svg class="icon" data-icon="\"cipher-app\"" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M868.6 422.9c0-196.6-159.9-356.6-356.6-356.6-196.6 0-356.6 159.9-356.6 356.6H96v534.9h832V422.9h-59.4zM512 185.1c131.1 0 237.7 106.6 237.7 237.7H274.3c0-131 106.6-237.7 237.7-237.7zm297.1 653.8H214.9V541.7h594.3v297.2z"/><path d="M469.6 614.5h84.9v127.3h-84.9z"/></svg>';var svgStr2 = '<svg class="icon" data-aa="a==1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M96 838.9h832v118.9H96V838.9zm178.3-356.6c0-131.3 106.4-237.7 237.7-237.7v118.9c-65.6 0-118.9 53.2-118.9 118.9v59.4H274.3v-59.5zM512 66.3c229.7 0 416 186.2 416 416v297.1H96V482.3c0-229.8 186.3-416 416-416zM214.9 660.6h594.3V482.3c0-164.1-133-297.1-297.1-297.1S215 318.2 215 482.3v178.3z"/></svg>';var svgStr3 = `<svg class="icon" data-aa="a==1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <path d="M96 838.9h832v118.9H96V838.9zm178.3-356.6c0-131.3"/> <path d="M98" hidden required disabled :area-label="ariaLabel" :class="{'is-disabled': disabled}" /> </svg>`;var svgStr4 = `<li class="icon-item" v-for="iconInfo in (visibledIconType === 'outlined' ? outlinedIcons : filledIcons)" :key="iconInfo.name"> <bs-icon :icon-name="iconInfo.name" :is-filled="iconInfo.isFilled" :svg-content="iconInfo.childrenContent"></bs-icon></li>`;var svgStr5 = ` <path d="M98" hidden required disabled :area-label="ariaLabel" :interaction="a+b == 1 ? \\"你好呀\\" ： 'hello!'" :class="{'is-disabled': disabled}" />`var html1 = ` <button aria-label="89个点赞" type="button" agree class="commentItem__interaction__agree"> 赞一个 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.096 2.5c1.973 0 3.313 1.823 2.944 3.6a3.027 3.027 0 0 1-.35.91l-.344.59h6.909a2 2 0 0 1 1.95 2.437l-1.929 8.618A3 3 0 0 1 16.35 21H3.753a1.5 1.5 0 0 1-1.5-1.5V9.1a1.5 1.5 0 0 1 1.5-1.5H6.41l2.607-4.479a1.25 1.25 0 0 1 1.08-.621ZM6.03 9.1H3.753v10.4H6.03V9.1Zm1.5 10.4h8.82a1.5 1.5 0 0 0 1.464-1.172l1.93-8.619a.5.5 0 0 0-.488-.609h-6.909a1.5 1.5 0 0 1-1.296-2.255l.343-.59a1.5 1.5 0 0 0-1.157-2.249L7.53 8.658V19.5Z" fill="#0C0D0F"></path></svg> <span>89</span>个赞 </button>`;var html2 = ` <button aria-label="89个点赞" type="button" agree class="commentItem__interaction__agree"> 赞一个 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.096 2.5c1.973" fill="#0C0D0F"></path></svg> 点击图标点赞吧！啊 啊 。啊 啊 <span>89</span> </button> <!--账号--> <button class="commentItem__interaction__reply">回复</button> `;var html3 = `<div class="commentItem__interaction_contaniner"> <div class="commentItem__interaction"> <button aria-label="89个点赞" type="button" agree class="commentItem__interaction__agree"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.096 2.5c1.973 0 3.313 1.823 2.944 3.6a3.027 3.027 0 0 1-.35.91l-.344.59h6.909a2 2 0 0 1 1.95 2.437l-1.929 8.618A3 3 0 0 1 16.35 21H3.753a1.5 1.5 0 0 1-1.5-1.5V9.1a1.5 1.5 0 0 1 1.5-1.5H6.41l2.607-4.479a1.25 1.25 0 0 1 1.08-.621ZM6.03 9.1H3.753v10.4H6.03V9.1Zm1.5 10.4h8.82a1.5 1.5 0 0 0 1.464-1.172l1.93-8.619a.5.5 0 0 0-.488-.609h-6.909a1.5 1.5 0 0 1-1.296-2.255l.343-.59a1.5 1.5 0 0 0-1.157-2.249L7.53 8.658V19.5Z" fill="#0C0D0F"></path></svg> <span>89</span> </button> <button class="commentItem__interaction__reply">回复</button> </div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" class="dotMoreAction_trigger commentItem__moreOptions"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 10.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.5.003a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM20 12a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" fill="#0C0D0F"></path></svg></div>`;var vueTemp1 = `<custom-formclass="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"><template slot="custom" slot-scope="scope"><!-- filterable remote reserve-keyword placeholder="请输出关键词" :remote-method="remoteMethod" :loading="loading" --><el-select @change="chooleSecretCode" :disabled="Boolean(requestData.id)" v-if="scope.prop === 'secretCode'" placeholder="请抉择密钥名称" v-model="customData.secretCode" popper-class="custom-el-popper"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="float: left">{{ item.label }}</span> <span style="float: right; color: #aaa; font-size: 12px">{{ {item.value.substr(item.value.length-2)}{item.version ? '--' : ''}{item.version || ''} }}</span></el-option></el-select></template></custom-form>`;下图是解析变量html2的后果：
如代码有bug欢送大佬评论斧正！