客户端 HTML 缩小

Question

有没有办法通过 javascript 进行这种缩小并更新 DOM（客户端）

输入：

<div class="parentDiv">
    <div class="childDiv">Some text</div>
    <div class="childDiv">Some text</div>
</div>

输出：

<div class="parentDiv"><div class="childDiv">Some text</div><div class="childDiv">Some text</div></div>

我知道在下载所有内容后进行缩小是没有用的。这里的重点是停止识别以在我的 div 之间创建间隙。我知道，如果我在标签之间添加注释，则不会出现间隙，但是在我的 div 标签之间有这么多注释，很难理解代码。

看到这个 [post] 你就会明白我的意思了。

Answer 1

如果是缩小版，DOM 将不会更新。此外，客户端缩小也无济于事：下载速度不快，客户端也不会混淆。

对于您所写的内容，我猜您可以将 '\n' 替换为 ''。

Answer 2

解析文档时需要小心，尤其是属性中的特殊字符。您可以编写自己的 DOM 解析器，但是，为什么要重新发明轮子？

这是一个很棒的解析器，用 JavaScript 编写：https://www.npmjs.com/package/html-minifier

说明已记录。

以上方法是"minify"生产代码；但是，如果这是视觉间距问题，请参见下文：

更新：

"White-space" 在涉及块元素时大多被忽略。
为确保您的内联块元素不被 "white-space" 分隔，您可以将您的（块）代码排列在彼此下方，表明它不是 "space" 分隔它们；除此之外，真正重要的是：

正确的CSS & HTML

确保您所有的 HTML 标签都正确 "paired" - 每个开放标签都有一个关闭标签。这不算 "void-tags" 像 <img /> 或 <input /> 因为它们是 "self closing".
如果您需要将方块并排放置，请使用 <div> 标记 CSS 样式为 display:inline-block。您还可以使用 "table-cells" - 不必是 <td> 标签，因为您也可以使用 CSS 来实现此目的，将样式设置为：display:table-cell.
您还可以通过将元素的样式指定为 float:left（或 "right"）.[=24= 来将元素紧紧地包裹在一起（如上所述） ]
最好将样式放在 CSS style-sheets 中，而不是内联，因为后者会使您的代码难以管理；但是，某些样式 sheet 是持久的（见下文），覆盖此类样式的唯一方法是使用内联样式。
如果您在其他人的代码库中编写代码并且 none 上述作品，您可以制作一些自己的样式 -sheet 来覆盖其他人用单词：!important 在每个属性之后。您可以使用它来覆盖任何属性，但在这种情况下，它通常是 margin 或 border-...
最后，如果不需要，请确保您的元素之间没有 no-braking-spaces；这些看起来像这样：

如果您需要有关如何编写现代 HTML5 标记和 CSS3 样式-sheet 语言的更多信息，"Mozilla Developer Network" 是一个很好的参考： https://developer.mozilla.org

Answer 3

试试这个 javascript 缩小脚本 -- http://prettydiff.com/lib/jspretty.js

Answer 4

所以让我们尝试解决这个问题："The point here is to stop the indentation to create gaps between my divs." 我可以从那句话 + [post] page + its linked answer page 中推断出客户端 HTML 缩小是不正确的此问题的解决方案。

在尝试缩小 HTML 代码或通过在 HTML 标记之间添加空白注释来修改代码之前，您是否研究过先使用 inline-block 或 CSS 重置？

linked answer page 讨论了使用 inline-block 消除 HTML 元素之间出现的间距。这两页还讨论了重置字体样式以解决间距问题。

CSS 重置可用于修复元素之间的间隙。在 http://cssreset.com 有一个最流行的 CSS 重置列表如果需要，应该很容易扩展它们以覆盖任何字体设置，从而使字体如何处理白色-space 个字符。

因此不需要在 HTML 标签之间插入空注释，以解决白色 space 字符的间距问题。如果使用 CSS 来固定样式，那么 HTML 将是可读的。如果 HTML 被缩小，将更难阅读和调试。我建议不要使用 JavaScript 缩小 HTML。而是尝试使用 CSS.

修复间距问题

（至于缩小是如何工作的...）

Answer 5

我设法实现了我想要的，甚至为它创建了一个 jQuery 插件。

jQuery.fn.clearWhiteSpace = function () {
    var htmlClone = this.html().replace(/\n[ ]*/g,"");
  this.html(htmlClone);

  return this;
}

$(".parentDiv").clearWhiteSpace();

我在jsfiddle

中写了一个例子

但感谢您的所有努力。 :)

Answer 6

在浏览器中使用 vanilla JS 缩小 HTML。

const minify_html = (dom_node) => {
    dom_node.childNodes.forEach(node => {
        const isTextNode = node.nodeType === 3;
        const isEmpty = node.nodeValue.trim().length === 0;
        if (isTextNode && isEmpty){
            dom_node.removeChild(node); 
        }
    });
};

我创建了一个包含 1,000 个元素的示例，我的计算机可以在不到 15 毫秒的时间内缩小 html，但它可能会更慢或更快，具体取决于设备运行代码。

https://jsfiddle.net/shwajyxr/

客户端 HTML 缩小

Clientside HTML Minification

html

javascript

whitespace

minify

removing-whitespace

更新：

正确的CSS & HTML