Clientside Html Minification

Question

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

Some text

Solution 1:

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);

  returnthis;
}

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

there is an example I wrote in jsfiddle

But thanks for all your effort. :)

Solution 2:

If it's a minification the DOM won't update. Also there's nothing client-side minification accomplishes: it's not faster to download and it's not obfuscated from the client.

For what you wrote, you can replace '\n' with '' I guess.

Solution 3:

Try this javascript minification script -- http://prettydiff.com/lib/jspretty.js

Solution 4:

So let's attempt to solve this issue: "The point here is to stop the indentation to create gaps between my divs." What I can deduce from that sentence + the [post] page + its linked answer page is that client-side HTML minification, isn't the correct solution for this problem.

Have you looked into using inline-block or CSS resets first, before attempting to minify the HTML code or munge it by adding blank comments between the HTML tags?

The linked answer page discusses using inline-block to eliminate the spacing, which is occurring between your HTML elements. Those two pages also discuss resetting the font styles to fix the spacing issues.

CSS Resets can be used to fix gaps between elements. There is a list of the most popular CSS Resets at http://cssreset.com If needed, it should be easy to extend them to override any font settings, thus normalizing how the fonts are treating the white-space characters.

So empty comments shouldn't need to be injected between HTML tags, to fix spacing issues with whitespace characters. If CSS is used to fix the styles, then the HTML will be readable. If the HTML is minified, it will be harder to read & debug. I'd suggest not minifying your HTML using JavaScript. Rather try fixing the spacing issues with CSS.

(As for how minification works under it's hood... see my answer at this SO question.)

Solution 5:

Minify HTML in the browser with vanilla JS.

constminify_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); 
        }
    });
};

I created an example with 1,000 elements, and my computer can minify the html in less than 15ms, but it may be slower or faster depending on the device running the code.

https://jsfiddle.net/shwajyxr/

Html5 Tech