Implementing HTML-minifier Plugin with JS

Question

I'm looking for a way to minify my HTML code that's retrieved with Javascript like this

document.getElementById("content").innerHTML;

The HTML is very disorganized and poorly indented but its w3c validated. I came across this plugin https://github.com/kangax/html-minifier But need help implementing with raw JS/jQuery because it only provides instructions for node.js, and my app isn't server-based.

Ionică Bizău · Accepted Answer · 2014-12-13 19:45:04Z

1

Include the file from dist directory in your page and use minify function. For reference see the options and the demo they provide.

Below I implemented it into a quick demo that removes the attribute value quotes:

$("#input").on("input", function() {
  $("#output").val(minify($(this).val(), {
    removeAttributeQuotes: true,
    collapseWhitespace: true
      // other options
  }));
});

<script src="https://rawgit.com/kangax/html-minifier/50fad6e3a7a77f37671afae6782f557bd686bc8b/dist/htmlminifier.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input</h1>
<textarea id="input"></textarea>

<h1>Output</h1>
<textarea id="output"></textarea>

edited Dec 13, 2014 at 19:45

answered Dec 13, 2014 at 19:29

Ionică Bizău

114k95 gold badges311 silver badges491 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3758078 Over a year ago

The demo you provided isn't actually minifying the code.

Ionică Bizău Over a year ago

@Shabbb Supposing you define minifying collapsing whitespaces, add collapseWhitespace: true option. See edit.

Collectives™ on Stack Overflow

Implementing HTML-minifier Plugin with JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related