时间戳

首页 > 解决方案 > 在 Javascript 中使用 RegEx 解析嵌套的 HTML 自定义标签

javascript - 在 Javascript 中使用 RegEx 解析嵌套的 HTML 自定义标签

问题描述

我正在使用 javascript 来操作存储在字符串中的 html 代码块。我正在使用的测试用例如下所示：

    '<iteration array = "Team1.TeamMembers" > \n' +
            '<li> {Name} </li> \n' +
            '<iteration array = "Team2.TeamMembers" > \n' +
                  '<li> {Name} </li> \n' +
                  '<iteration array = "Team3.TeamMembers" > \n' +
                       '<li> {Name} </li> \n' +
                  '</iteration> \n' +
                  '<iteration array = "Team5.TeamMembers" > \n' +
                       '<li> {Name} </li> \n' +
                  '</iteration> \n' +
            '</iteration> \n' +
    '</iteration> \n' +
    '<iteration array = "Team4.TeamMembers" > \n' +
            '<li> {Name} </li> \n' +
     '</iteration> \n' +
     '</ul> \n';

数组和占位符将从作为输入给出的 json 文件中获取，但它们与我遇到的问题无关。我需要正确识别每个自定义 html 标记的嵌套级别，以便正确替换每个占位符和变量。我尝试了几种正则表达式解决方案，但它们最终都在某种程度上中断了。我知道我不应该使用正则表达式来解析 html，但这是我应该解决的任务。任何建议或替代方法将不胜感激。

标签： javascripthtmlregex

解决方案

无需重新发明轮子 - DOMParser 文档中已经有一个解析器。它将代码解析为 HTML 页面，包括 head 等，但是您可以找到您想要的内容，并且可以直接访问现有属性，但也可能显式访问不存在的属性：

var src = '<iteration array = "Team1.TeamMembers" > \n' +
            '<li> {Name} </li> \n' +
            '<iteration array = "Team2.TeamMembers" > \n' +
                  '<li> {Name} </li> \n' +
                  '<iteration array = "Team3.TeamMembers" > \n' +
                       '<li> {Name} </li> \n' +
                  '</iteration> \n' +
                  '<iteration array = "Team5.TeamMembers" > \n' +
                       '<li> {Name} </li> \n' +
                  '</iteration> \n' +
            '</iteration> \n' +
    '</iteration> \n' +
    '<iteration array = "Team4.TeamMembers" > \n' +
            '<li> {Name} </li> \n' +
     '</iteration> \n' +
     '</ul> \n';
var parser = new DOMParser(), dom;
dom = parser.parseFromString(src, "text/html");
dom = dom.documentElement.lastElementChild.firstElementChild; // body -> iteration
console.log( dom.getAttribute("array") );

推荐阅读