📌  相关文章
📜  从预代码标记中缩进的 HTML 源代码中删除前导空格 - Html (1)

📅  最后修改于: 2023-12-03 14:49:29.566000             🧑  作者: Mango

从预代码标记中缩进的 HTML 源代码中删除前导空格 - Html

在编写 HTML 代码时，有时会使用 <pre> 标签来显示预格式化的文本，保留原始的缩进和空格。但有时候，我们可能想要删除 HTML 代码块中的前导空格，以保持整个页面的一致性和可读性。

下面是一种方法，可以通过使用 JavaScript 来删除预代码标记中缩进的 HTML 源代码中的前导空格。

<!DOCTYPE html>
<html>
<head>
  <title>Remove Leading Whitespace from Preformatted HTML Source Code</title>
  <script>
    function removeLeadingWhitespace() {
      var preBlocks = document.getElementsByTagName("pre");
      for (var i = 0; i < preBlocks.length; i++) {
        var lines = preBlocks[i].innerHTML.split("\n");
        var minIndentation = Number.MAX_SAFE_INTEGER;
        for (var j = 0; j < lines.length; j++) {
          if (lines[j].trim() !== "") {
            var indentation = lines[j].length - lines[j].trimLeft().length;
            if (indentation < minIndentation) {
              minIndentation = indentation;
            }
          }
        }
        for (var j = 0; j < lines.length; j++) {
          lines[j] = lines[j].substring(minIndentation);
        }
        preBlocks[i].innerHTML = lines.join("\n");
      }
    }
  </script>
</head>
<body onload="removeLeadingWhitespace()">
  <pre>
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Remove Leading Whitespace from Preformatted HTML Source Code&lt;/title&gt;
      &lt;style&gt;
        body {
          font-family: Arial, sans-serif;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello, World!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </pre>
</body>
</html>

这段代码会在页面加载时运行 removeLeadingWhitespace() 函数。该函数会找到页面中的每个 <pre> 标签，并将其内容分割成行。然后，它会检查每一行的前导空格，找到最小的缩进量，并将所有行的前导空格从 HTML 代码中删除。最后，将修改后的代码重新设置为 <pre> 标签的内容。

注意，此代码假设所有行都具有相同的缩进量，并且只删除前导空格而不处理其他空格。此外，如果代码包含标签或其他特殊字符，请确保在设置 innerHTML 时进行适当的转义。

希望这个方法对你有帮助！