HTML Formatter HTML Formatter & Beautifier Format your messy HTML code with proper indentation and structure. Use spaces for indentation Indent size Input HTML: Format HTML Minify HTML Clear All Copy Result Formatted HTML: ]+)/); if (tagMatch && !tagMatch[1]) { tagStack.push(tagMatch[2].toLowerCase()); } else if (tagMatch && tagMatch[1]) { tagStack.pop(); } } } else if (char === '\n') { result += char + indent; } else { result += char; } } // Clean up result result = result.replace(/\n\s*\n/g, '\n').replace(/^\n+/, '').replace(/\s+$/g, ''); return result; } // HTML Minify function (same as before) function minifyHTML(html) { return html .replace(//g, '') .replace(/\s+/g, ' ') .replace(/>\s+<') .replace(/\s+/g, ' ') .replace(/^\s+|\s+$/g, '') .trim(); } // Format button handler $('#html-format-btn').on('click', function(e) { e.preventDefault(); console.log('Format button clicked'); // Debug var input = $('#html-format-input').val(); if (!input.trim()) { alert('Please enter some HTML code first.'); return; } var indentSize = parseInt($('#indent-size').val()) || 4; var useSpaces = $('#indent-spaces').is(':checked'); var formatted = formatHTML(input, indentSize, useSpaces); $('#html-format-output').val(formatted); }); // Minify button handler (in formatter) $('#html-minify-format-btn').on('click', function(e) { e.preventDefault(); var input = $('#html-format-input').val(); if (!input.trim()) { alert('Please enter some HTML code first.'); return; } var minified = minifyHTML(input); $('#html-format-output').val(minified); }); // Clear button handler $('#html-clear-format-btn').on('click', function(e) { e.preventDefault(); if (confirm('Are you sure you want to clear all?')) { $('#html-format-input, #html-format-output').val(''); } }); // Copy button handler $('#html-copy-format-btn').on('click', function(e) { e.preventDefault(); var output = $('#html-format-output').val(); if (!output.trim()) { alert('No content to copy.'); return; } // Create temporary textarea for copying var $temp = $(''); $('body').append($temp); $temp.val(output).select(); document.execCommand('copy'); $temp.remove(); // Visual feedback var $btn = $(this); var originalText = $btn.html(); $btn.html(' Copied!'); setTimeout(function() { $btn.html(originalText); }, 2000); }); // Auto-resize textareas $('.tool-textarea').on('input', function() { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); });