javascript - 从 pre/code 标记中缩进的 HTML 源中删除前导空格

Question

我目前在预代码块中有以下 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还是有更简单的方法。

Answer 1

该问题询问是否有 JavaScript 解决方案或更简单的方法来删除前导空格。有一个更简单的方法：

CSS

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

演示

空白

该white-space属性用于描述如何处理元素内的空白。

前线

空格序列被折叠。

Answer 2

我真的很喜欢 Homam 的想法，但我不得不改变它来处理这个问题：

<pre><code><!-- There's 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>标签。）

Answer 3

您可能只想更改它的输出方式，但使用 JavaScript 非常简单

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

http://jsfiddle.net/a4gfZ/

Answer 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();
  }
});

Answer 5

当你使用 时pre，你应该将它的内容格式化为你希望它被渲染的样子。pre这就是（预格式化文本）的想法。但如果它只是缩进，你可以使用 CSS:margin-left一个合适的负值。