javascript 从前/代码标签中的缩进 HTML 源中删除前导空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17257200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing leading whitespace from indented HTML source in pre/code tags
提问by Deep
I currently have the following html within a pre-code block:
我目前在预代码块中有以下 html：
<pre class="prettyprint"><code>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>
</code></pre>
It is indented within the html source for better structure within the document. How can I remove the leading whitespace? Through the use of javascript or is there a more simple method.
它在 html 源代码中缩进，以便在文档中获得更好的结构。如何删除前导空格？通过使用javascript或者有没有更简单的方法。
采纳答案by Explosion Pills
You may want to just change how it is output, but it is fairly simple to do with JavaScript
您可能只想更改它的输出方式，但使用 JavaScript 相当简单
var p = document.querySelector(".prettyprint");
p.textContent = p.textContent.replace(/^\s+/mg, "");
回答by Michael Benjamin
The question asks if there's a JavaScript solution or a simpler method for removing leading whitespace. There's a simpler method:
该问题询问是否有 JavaScript 解决方案或更简单的方法来删除前导空格。有一个更简单的方法：
CSS
CSS
pre, code {
white-space: pre-line;
}
The
white-spaceproperty is used to describe how whitespace inside the element is handled.pre-line
Sequences of whitespace are collapsed.
该
white-space属性用于描述如何处理元素内的空白。前线
空白序列被折叠。
回答by voltrevo
I really like Homam's idea, but I had to change it to deal with this:
我真的很喜欢 Homam 的想法，但我不得不改变它来处理这个：
<pre><code><!-- There's nothing on this line, so the script thinks the indentation is zero -->
foo = bar
</code></pre>
To fix it, I just take out the first line if it's empty:
为了修复它，如果第一行是空的，我就取出它：
[].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();
}
});
(I'm also processing <code>tags instead of <pre>tags.)
（我也在处理<code>标签而不是<pre>标签。）
回答by homam
Extending the above solution, this snippet assumes the indentation of the the first line inside <pre>is 0 and it realigns all the lines based on the first line:
扩展上述解决方案，此代码段假定内部第一行的缩进<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();
}
});
回答by Jukka K. Korpela
When you use pre, you should format its content to be exactly as you want it to be rendered. That's the very idea of pre(preformatted text). But if it's just indentation, you could use CSS: margin-leftwith a suitable negative value.
当您使用 时pre，您应该将其内容格式化为与您希望呈现的完全一样。这就是pre（预先格式化的文本）的想法。但如果它只是缩进，你可以使用 CSS:margin-left一个合适的负值。
