Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel