How to format/tidy/beautify in JavaScript

Question

How can I format/tidy/beautify HTML in JavaScript? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. But of course it does not take into account when the is JS or CSS etc inside the HTML.

The reason I want to do this is I have made a content editor (CMS) which has both WYSIWYG and source code views. The problem the code written by the WYSIWYG editor is normally a single line. So I would like a JavaScript that could format this into a more readable form on demand.

Here what I have so far:

function getIndent(level) {     var result = '',         i = level * 4;     if (level < 0) {         throw "Level is below 0";     }     while (i--) {         result += ' ';     }     return result; }  function style_html(html) {     html = html.trim();     var result = '',         indentLevel = 0,         tokens = html.split(/</);     for (var i = 0, l = tokens.length; i < l; i++) {         var parts = tokens[i].split(/>/);         if (parts.length === 2) {             if (tokens[i][0] === '/') {                 indentLevel--;             }             result += getIndent(indentLevel);             if (tokens[i][0] !== '/') {                 indentLevel++;             }              if (i > 0) {                 result += '<';             }              result += parts[0].trim() + ">\n";             if (parts[1].trim() !== '') {                 result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";             }              if (parts[0].match(/^(img|hr|br)/)) {                 indentLevel--;             }         } else {             result += getIndent(indentLevel) + parts[0] + "\n";         }     }     return result; } 

Answer 1

I use this method to format HTML. Simple, but does the job:

function format(html) {     var tab = '\t';     var result = '';     var indent= '';      html.split(/>\s*</).forEach(function(element) {         if (element.match( /^\/\w/ )) {             indent = indent.substring(tab.length);         }          result += indent + '<' + element + '>\r\n';          if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) {              indent += tab;                       }     });      return result.substring(1, result.length-3); }