HTML cleaner in JavaScript Please review code quality and give me shortcuts or optimization tips as well as corrections.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Clean HTML Code&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;textarea id="code" cols="80" rows="15" autofocus&gt;&lt;/textarea&gt;&lt;/p&gt;
&lt;p&gt;&lt;input id="comments" type="checkbox" checked&gt; &lt;label for="comments"&gt;Remove All HTML Comments&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;input id="head" type="checkbox"&gt; &lt;label for="head"&gt;Remove Head Tags&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;input id="style" type="checkbox"&gt; &lt;label for="style"&gt;Remove Style Tags&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;input id="script" type="checkbox"&gt; &lt;label for="script"&gt;Remove All Script Tags (also removes NoScript Tags)&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button id="btn"&gt;Clean Up HTML&lt;/button&gt;&lt;/p&gt;
&lt;script&gt;
  var code = $("code"),
    comments = $("comments"),
    head = $("head"),
    style = $("style"),
    script = $("script"),
    btn = $("btn");

  function $(id) {
    return document.getElementById(id);
  }

  function cleanUpHtml() {
    var html = code.value;

    // http://blog.gotux.net/tutorial/clean-html-code-using-regex-in-ruby/

    html = html.replace(/(\n|\t|\r)/g, ' '); // Remove Newlines, Tabs and Carriage Returns
    html = html.replace(/&gt;\s*&lt;/g, '&gt;&lt;'); // Remove Spaces Between Tags
    if (comments.checked) html = html.replace(/&lt;!--.*?--&gt;/im, ''); // Remove All HTML Comments
    if (head.checked) html = html.replace(/&lt;head.*?&lt;\/head&gt;/im, ''); // Remove Head Tags
    if (style.checked) html = html.replace(/&lt;style.*?&lt;\/style&gt;/im, ''); // Remove Style Tags
    if (script.checked) {
      html = html.replace(/&lt;script.*?&lt;\/script&gt;/im, ''); // Remove All Script Tags
      html = html.replace(/&lt;noscript.*?&lt;\/noscript&gt;/im, ''); // Remove All NoScript Tags
      html = html.replace(/on.=".*?"/ig, ''); // Remove All Event Handler Attributes (eg. onclick)
    }
    html = html.replace(/&lt;form.*?&lt;\/form&gt;/im, ''); // Remove All Form Elements
    // html.squeeze!(' ') // Remove Spaces Between Strings
    html = html.replace(/\s{2,}/g, " ") // finally, remove extra spaces
    code.value = html;
  }

  btn.addEventListener("click", cleanUpHtml, false);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
First of all, you can't parse HTML with regex. RegEx is totally the wrong person for the job. Your code there assumes that the input HTML is properly formatted. If given broken HTML, you code won't even stand a chance. I suggest you use a parser instead. Creating one isn't trivial, so you might want to look for one out there.

Now, I see you use $ and I thought it was jQuery until I saw the code define it. Avoid using $. Name your function verbosely instead. That way, you don't confuse people to thinking it is jQuery when it isn't.



Now, speaking of jQuery, you could theoretically use jQuery to strip out HTML since it has a DOM parser and handy DOM functions:

// Get the HTML
var html = $('#code').val();
var DOM = $(html);

// Collect selectors to remove
var toRemove = [];
if(head.checked) toRemove.push('head');
if(style.checked) toRemove.push('style');
if(script.checked) toRemove.push('script');
if(form.checked) toRemove.push('form');

DOM.remove(toRemove.join(','));

if(comments.checked) DOM = DOM.filter('*');

var cleanHTML = DOM.html();


Just a theory. Dunno how it would really perform.