Удаление ведущих пробелов из вложенного источника HTML в тегах pre/code

В настоящее время у меня есть следующий html в блоке предварительного кода:

                <pre class="prettyprint"><code>
                    &lt;html&gt;
                    &lt;body&gt;

                    &lt;form name=&quot;input&quot; action=&quot;html_form_action.asp&quot; method=&quot;get&quot;&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot;&gt;Male&lt;br&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot;&gt;Female&lt;br&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
                    &lt;/form&gt; 

                    &lt;p&gt;If you click the &quot;Submit&quot; button, the form-data will be sent to a page called &quot;html_form_action.asp&quot;.&lt;/p&gt;

                    &lt;/body&gt;
                    &lt;/html&gt;
                </code></pre>

Отступы внутри источника html для лучшей структуры внутри документа. Как удалить ведущие пробелы? С помощью javascript или есть более простой метод.

Ответы

Ответ 1

Вы можете просто изменить способ его вывода, но это довольно просто сделать с JavaScript

var p = document.querySelector(".prettyprint");
p.textContent = p.textContent.replace(/^\s+/mg, "");

http://jsfiddle.net/a4gfZ/

Ответ 2

В вопросе спрашивается, есть ли решение JavaScript или более простой метод для удаления ведущих пробелов. Там более простой метод:

CSS

pre, code {
    white-space: pre-line;
}

DEMO

белое пространство

Свойство white-space используется для описания того, как пробелы внутри элемент обрабатывается.

предварительно линии

Последовательности пробелов сбрасываются.

Ответ 3

Мне очень нравится идея Хомама, но мне пришлось изменить ее, чтобы справиться с этим:

<pre><code><!-- There nothing on this line, so the script thinks the indentation is zero -->
    foo = bar
</code></pre>

Чтобы исправить это, я просто вынимаю первую строку, если она пуста:

[].forEach.call(document.querySelectorAll('code'), function($code) {
    var lines = $code.textContent.split('\n');

    if (lines[0] === '')
    {
        lines.shift()
    }

    var matches;
    var indentation = (matches = /^[\s\t]+/.exec(lines[0])) !== null ? matches[0] : null;
    if (!!indentation) {
        lines = lines.map(function(line) {
            line = line.replace(indentation, '')
            return line.replace(/\t/g, '    ')
        });

        $code.textContent = lines.join('\n').trim();
    }
});

(Я также обрабатываю теги <code> вместо тегов <pre>).

Ответ 4

Расширение указанного решения, этот фрагмент предполагает, что отступ первой строки внутри <pre> равен 0, и он перенастраивает все строки на основе первой строки:

[].forEach.call(document.querySelectorAll('pre'), function($pre) {
  var lines = $pre.textContent.split('\n');
  var matches;
  var indentation = (matches = /^\s+/.exec(lines[0])) != null ? matches[0] : null;
  if (!!indentation) {
    lines = lines.map(function(line) {
      return line.replace(indentation, '');
    });
    return $pre.textContent = lines.join('\n').trim();
  }
});

Ответ 5

Когда вы используете pre, вы должны отформатировать его содержимое в точности так, как вы хотите, чтобы оно отображалось. Это сама идея pre (предварительно отформатированный текст). Но если это просто отступы, вы можете использовать CSS: margin-left с подходящим отрицательным значением.

Ответ 6

Отличное @voltrevo! Это именно то, что я хочу, спасибо за акцию.