Question

有没有办法用javascript进行这种缩小并更新DOM（clientSide）

输入：

<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

说明书已记录在案。

上述方法是“缩小”＆＃34;生产代码;但是，如果它是视觉间距问题，请参阅下文：

更新

＆＃34;空白＆＃34;在块元素方面，大多数都被忽略了确保您的内联块元素不被＆＃34; white-space＆＃34;你可以安排你的（块）代码在彼此之下，表明它不是一个空间＆＃34;将他们分开;除此之外，这里真正重要的是：

适当的CSS＆amp; HTML

确保所有HTML代码都已配对＆＃34;正确地说 - 每个open-tag都有一个close-tag。这不计入＆＃34; void-tags＆＃34;比如<img />或<input />，因为这些是＆＃34;自我关闭＆＃34;。
如果您需要彼此相邻的块，请使用CSS样式的<div>标记为display:inline-block。您还可以使用＆＃34; table-cells＆＃34; - 不必是<td>标签，因为您可以通过CSS将其设置为：display:table-cell。
您还可以将元素包装并紧密包装在一起（如上所述），方法是将其样式指定为：float:left（或＆＃34;右＆＃34;）。
< / LI>
最好将样式放在CSS样式表中 - 不要在线，因为后者会使代码无法管理;但是，一些样式表是持久的（见下文），并且覆盖这些样式的唯一方法是使用内联样式。
如果你在别人的代码库中进行编码而没有上述任何作品，你可以制作一些自己的样式表来覆盖其他样式表：{{ 1}}在每个属性之后。您可以使用它覆盖任何属性，但在这种情况下，它通常为!important或margin
最后，如果不需要，请确保元素之间没有border-...;这些看起来像这样：no-braking-spaces

如果您需要有关如何编写现代HTML5标记和CSS3样式表语言的更多信息，那么＆＃34; Mozilla开发者网络＆＃34;是一个很好的参考：https://developer.mozilla.org

Answer 3

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

Answer 4

因此，让我们尝试解决这个问题：“这里的重点是停止缩进以在我的div之间产生差距。”我可以从该句子+ [post]页面+其linked answer page推断出的是客户端HTML缩小，这不是解决此问题的正确方法。

您是否先尝试使用inline-block或CSS重置，然后尝试缩小HTML代码或通过在HTML标记之间添加空白注释来实现它？

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

CSS Resets可用于修复元素之间的间隙。在http://cssreset.com有一个最受欢迎的CSS重置列表。如果需要，应该很容易扩展它们以覆盖任何字体设置，从而规范化字体处理空白字符的方式。

因此，不需要在HTML标记之间注入空注释，以修复空格字符的间距问题。如果使用CSS来修复样式，那么HTML将是可读的。如果缩小HTML，将会更难阅读和调试。我建议不要使用JavaScript缩小HTML。而是尝试用CSS修复间距问题。

（关于缩小是如何在它下面工作的...... see my answer at this SO question.）

Answer 5

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

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

  return this;
}

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

我在jsfiddle

中写了一个例子

但感谢您的所有努力。：）

Answer 6

使用香草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个元素的示例，我的计算机可以在不到15ms的时间内缩小html，但根据运行代码的设备，它可能变慢或变快。

https://jsfiddle.net/shwajyxr/

客户端HTML缩小

6 个答案:

更新

适当的CSS＆amp; HTML