How to minify HTML block in JavaScript / jQuery?

Question

I have HTML coming from templates that I need to remove spaces between elements and new lines. I don't want to remove spaces that would break the HTML, so it is becoming tricky for me. So far I have the below to remove new lines, but spaces I am stuck on:

'<div id="head"></div> \n   <div id="body"></div>    <div id="foot"></div> '.replace(/(\r\n|\n|\r)/gm, '');

Is there hopefully something built into jQuery instead of a complex regex maybe to remove the spaces?

Don't know web stuff but is it possible to parse it with a dom, edit the elements, then reconstruct it? Because finding a tag can be quite complex. Its not like you can reliably use (in the case of tags) /(>)\s+|\s+(<)/. — user557597
– user557597, Commented Feb 20, 2014 at 17:44

Karl-André Gagnon · Accepted Answer · 2014-02-20 16:26:32Z

8

This should work :

.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2')

Fiddle

edited Feb 20, 2014 at 16:26

answered Feb 20, 2014 at 16:20

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

2 Comments

tenub Over a year ago

Don't forget to $.trim the wrapping whitespace in the original string if you're going to do it this way.

Sean Lin Over a year ago

In some cases it breaks the text. For example How are yuo will be "Howareyuo"

Collectives™ on Stack Overflow

How to minify HTML block in JavaScript / jQuery?

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