客户端 HTML 缩小 [英] Clientside HTML Minification

问题描述

有没有办法用javascript进行这种缩小并更新DOM(客户端)

输入:

<div class="childDiv">一些文字</div><div class="childDiv">一些文字</div>

输出:

<div class="parentDiv"><div class="childDiv">一些文字</div><div class="childDiv">一些文字</div></div>

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

请参阅此 [帖子] 你就会明白我的意思.

解决方案

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

jQuery.fn.clearWhiteSpace = function () {var htmlClone = this.html().replace(/\n[ ]*/g,"");this.html(htmlClone);返回这个；}$(".parentDiv").clearWhiteSpace();

我在 jsfiddle

中写了一个例子

但是感谢您的所有努力.:)

Is there a way to this kind of minification with javascript and update the DOM (clientSide)

Input:

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

Output:

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

I know its useless doing the minification after downloading all the content. The point here is to stop the identation to create gaps between my divs. I know that if I put a comment between the tags the gap won't appear but it gets difficult to understand the code with so many comments between my div tags.

See this [post] and you'll understand what I mean.

解决方案

I managed to achieve what I wanted and even created a jQuery plugin to it.

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

  return this;
}

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

there is an example I wrote in jsfiddle

But thanks for all your effort. :)

这篇关于客户端 HTML 缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！