Преобразование строки HTML в текст JavaScript с сохранением отступа

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

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

У меня есть структура 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.


javascript komodoedit
person Om Shankar    schedule 25.04.2012    source источник
comment
Что не так с .innerHTML?   -  person Blender    schedule 25.04.2012
comment
Кого вообще волнует отступ разметки внутри строки?   -  person ThiefMaster    schedule 25.04.2012
comment
@Blender, Ой! Извините за неясность. Я хочу сохранить некоторый HTML в переменной (не взятой из DOM, я ее создам). Я хочу скопировать и вставить его из какого-нибудь файла HTML и сохранить себя, усилия по вводу текста   -  person Om Shankar    schedule 30.04.2012
comment
@ThiefMaster, я хочу сохранить отступ, чтобы он хорошо выглядел для тех, кто читает код, и следовать стандарту   -  person Om Shankar    schedule 30.04.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person georg    schedule 25.04.2012
comment
Я искал \1 — он сохраняет ваши совпадения. Спасибо за проявленную способность понимания - хе хе - person Om Shankar; 30.04.2012

arrow_upward
0
arrow_downward

Вместо того, чтобы преобразовывать 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/

person Chuck Le Butt    schedule 13.07.2016
comment
Это был только пример, главный вопрос был в сохранении отступов. - person Om Shankar; 21.07.2016
comment
@OmShankar Почему вы хотите сохранить отступ? - person Chuck Le Butt; 21.07.2016
comment
Одностраничные приложения, шаблоны. Методы карты Scala. Фрагменты XML, конфигурация YAML и т. д. - person Om Shankar; 22.07.2016
comment
@OmShankar Почему бы не написать что-то, что переформатирует код перед его отображением? Гораздо меньше вероятность возникновения ошибок в форматировании, если это не оставлено на усмотрение пользователя. - person Chuck Le Butt; 22.07.2016
comment
вы не получили мой комментарий. Я просто хотел сказать, что в обычном повседневном кодировании (включая серверную часть) вам нужны отступы, а не только файлы HTML. Теперь, если вы выполните поиск и замену, как в примере, который я привел выше, вы потеряете отступ в файле кода. Поэтому должен быть способ сохранить форматирование любого кода после такой операции. Что я нашел в ответе. - person Om Shankar; 22.07.2016