Разбор вложенных пользовательских тегов HTML с помощью RegEx в Javascript

Question

Я работаю в 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, но это задача, которую я должен решить.Будем весьма благодарны за любые предложения или альтернативные методы.

Answer 1

Не нужно заново изобретать колесо - уже есть парсер Документация DOMParser .Он анализирует код как HTML-страницу, включая заголовок и т. Д., Но вы можете найти то, что вам нужно, и к существующим свойствам можно получить прямой доступ, но к несуществующим, вероятно, тоже явно:

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") );

Answer 2

С некоторым предварительным форматированием вы можете превратить его в действительный xml (удалить пробелы / переносы строк, добавив начальный ul-open-tag):

<ul>
    <iteration array="Team1.TeamMembers">
        <li>{Name}</li>
        <iteration array="Team2.TeamMembers">
            <li>{Name}</li>
            <iteration array="Team3.TeamMembers">
                <li>{Name}</li>
            </iteration>
            <iteration array="Team5.TeamMembers">
                <li>{Name}</li>
            </iteration>
        </iteration>
    </iteration>
    <iteration array="Team4.TeamMembers">
        <li>{Name}</li>
    </iteration>
</ul>

, из которого вы можете использовать DOMParser дляразобрать документ.