Конвертировать HTML-строку в JavaScript, сохраняя отступы

Question

Я хочу настроить таргетинг или сопоставить только первое вхождение в строке

Типичный сценарий:

У меня есть структура HTML, которую я использую в JavaScript.

<ul>
    <li> ABC </li>
    <li> DEF </li>
    <li> GHI <span> GHI-SPAAN </span> </li>
</ul>

Чтобы преобразовать вышеупомянутое в строку, в моем редакторе я могу просто найти и заменить EOL на '+и начало строки с ' так что код будет

var tpl = ''+
    '<ul> '+
    '<li> ABC </li> '+
    '<li> DEF </li> '+
    '<li> GHI <span> GHI-SPAAN </span> </li> '+
    '</ul> ';

Но вы видите, я теряю отступ, когда заменяю начало строки на '<

Поэтому я хочу, чтобы уникальная цель (цель только первое вхождение < и заменить на '<)

Я использую KOMODO edit и Sublime Text 2

Answer 1

Я не пользователь KomodoEdit, но я попробовал эти замены, и они работали:

• начальная цитата: заменить ^(\s*)< с \1<
• окончание цитаты: заменить >\s*$ с >' +

Надеюсь это поможет.

Answer 2

Вместо преобразования HTML в строку JS было бы гораздо лучше создать элементы в JS и поместить их в DOM. Это даст вам гораздо больше контроля, не создаст такой сложный в обслуживании / чтении код и будет намного быстрее (среди других преимуществ):

var outerDiv = document.createElement("div");
outerDiv.className = "spa-shell-head";

var innerDivLogo = document.createElement("div");
innerDivLogo.className = "spa-shell-head-logo";

var innerDivAcct = document.createElement("div");
innerDivAcct.className = "spa-shell-head-acct";

var innerDivSearch = document.createElement("div");
innerDivSearch.className = "spa-shell-head-search";

outerDiv.appendChild(innerDivLogo);
outerDiv.appendChild(innerDivAcct);
outerDiv.appendChild(innerDivSearch);
document.body.appendChild(outerDiv);

Вышесказанное создает следующее:

https://jsfiddle.net/yfeLbhe4/