{"id":36,"date":"2026-08-13T17:37:51","date_gmt":"2026-08-13T17:37:51","guid":{"rendered":"https:\/\/www.relayed.net\/?page_id=36"},"modified":"2026-08-13T17:37:51","modified_gmt":"2026-08-13T17:37:51","slug":"whitespace-cleaner","status":"publish","type":"page","link":"https:\/\/www.relayed.net\/?page_id=36","title":{"rendered":"Whitespace Cleaner"},"content":{"rendered":" <div id=\"cwc-tool\">\n <div class=\"cwc-row\">\n <label for=\"cwc-input\">Paste code<\/label>\n <textarea id=\"cwc-input\" spellcheck=\"false\" placeholder=\"Paste your code here...\"><\/textarea>\n <\/div>\n\n <div class=\"cwc-options\">\n <label>\n <input type=\"checkbox\" id=\"cwc-style-format\" checked>\n Format &lt;style&gt; blocks\n <\/label>\n <\/div>\n\n <div class=\"cwc-actions\">\n <button type=\"button\" id=\"cwc-clean\">Clean code<\/button>\n <button type=\"button\" id=\"cwc-copy\">Copy result<\/button>\n <button type=\"button\" id=\"cwc-clear\">Clear<\/button>\n <\/div>\n\n <div class=\"cwc-row\">\n <label for=\"cwc-output\">Result<\/label>\n <textarea id=\"cwc-output\" spellcheck=\"false\" readonly><\/textarea>\n <\/div>\n\n <div id=\"cwc-status\" aria-live=\"polite\"><\/div>\n <\/div>\n\n <style>\n #cwc-tool {\n max-width: 1000px;\n margin: 20px 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n }\n #cwc-tool .cwc-row {\n margin-bottom: 15px;\n }\n #cwc-tool label {\n display: block;\n margin-bottom: 6px;\n font-weight: 600;\n }\n #cwc-tool .cwc-options {\n margin-bottom: 15px;\n }\n #cwc-tool .cwc-options label {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-weight: 400;\n }\n #cwc-tool textarea {\n display: block;\n width: 100%;\n min-height: 300px;\n box-sizing: border-box;\n padding: 12px;\n border: 1px solid #ccd0d4;\n border-radius: 4px;\n background: #fff;\n color: #1d2327;\n font-family: Consolas, Monaco, monospace;\n font-size: 13px;\n line-height: 1.5;\n resize: vertical;\n }\n #cwc-tool .cwc-actions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n margin-bottom: 15px;\n }\n #cwc-tool button {\n padding: 9px 14px;\n border: 0;\n border-radius: 4px;\n background: #2271b1;\n color: #fff;\n cursor: pointer;\n }\n #cwc-tool button:hover {\n background: #135e96;\n }\n #cwc-tool #cwc-clear {\n background: #646970;\n }\n #cwc-tool #cwc-status {\n min-height: 20px;\n margin-top: 8px;\n font-size: 13px;\n }\n\n @media (max-width: 600px) {\n #cwc-tool .cwc-actions {\n flex-direction: column;\n }\n }\n <\/style>\n\n <script>\n (function () {\n var input = document.getElementById('cwc-input');\n var output = document.getElementById('cwc-output');\n var clean = document.getElementById('cwc-clean');\n var copy = document.getElementById('cwc-copy');\n var clear = document.getElementById('cwc-clear');\n var styleFormat = document.getElementById('cwc-style-format');\n var status = document.getElementById('cwc-status');\n\n if (!input || !output) {\n return;\n }\n\n function cleanWhitespace(code) {\n return code.replace(\/[ \\t]+\/g, ' ');\n }\n\n function formatStyleBlock(css) {\n css = cleanWhitespace(css);\n\n css = css.replace(\/\\s*\\{\\s*\/g, ' { ');\n css = css.replace(\/\\s*\\}\\s*\/g, ' } ');\n css = css.replace(\/\\s*;\\s*\/g, '; ');\n css = css.replace(\/\\s*,\\s*\/g, ', ');\n css = css.replace(\/\\s*:\\s*\/g, ': ');\n css = css.replace(\/ +\/g, ' ');\n\n css = css.replace(\/\\s*\\{\\s*\/g, ' { ');\n css = css.replace(\/\\s*\\}\\s*\/g, ' } ');\n css = css.trim();\n\n var result = [];\n var current = '';\n var depth = 0;\n var i;\n\n for (i = 0; i < css.length; i++) {\n var char = css.charAt(i);\n current += char;\n\n if (char === '{') {\n depth++;\n }\n\n if (char === '}') {\n depth--;\n\n if (depth === 0) {\n result.push(current.trim());\n current = '';\n }\n }\n }\n\n if (current.trim()) {\n result.push(current.trim());\n }\n\n var outputLines = [];\n\n result.forEach(function (block) {\n var mediaMatch = block.match(\/^(@[^{]+\\{)([\\s\\S]*)\\}$\/);\n\n if (!mediaMatch) {\n outputLines.push(block);\n return;\n }\n\n var header = mediaMatch[1].trim();\n var contents = mediaMatch[2].trim();\n\n contents = contents.replace(\/\\s*\\{\\s*\/g, ' { ');\n contents = contents.replace(\/\\s*\\}\\s*\/g, ' } ');\n contents = contents.replace(\/ +\/g, ' ');\n\n var inner = [];\n var currentInner = '';\n var innerDepth = 0;\n\n for (var j = 0; j < contents.length; j++) {\n var innerChar = contents.charAt(j);\n currentInner += innerChar;\n\n if (innerChar === '{') {\n innerDepth++;\n }\n\n if (innerChar === '}') {\n innerDepth--;\n\n if (innerDepth === 0) {\n inner.push(currentInner.trim());\n currentInner = '';\n }\n }\n }\n\n if (currentInner.trim()) {\n inner.push(currentInner.trim());\n }\n\n outputLines.push(header + ' ' + inner.join('\\n ') + ' }');\n });\n\n return outputLines.join('\\n ');\n }\n\n function formatStyleBlocks(code) {\n return code.replace(\/<style\\b[^>]*>[\\s\\S]*?<\\\/style>\/gi, function (block) {\n var opening = block.match(\/^(\\s*<style\\b[^>]*>)\/i);\n var closing = block.match(\/(<\\\/style>\\s*)$\/i);\n\n if (!opening || !closing) {\n return block;\n }\n\n var css = block\n .slice(opening[0].length, block.length - closing[0].length)\n .trim();\n\n css = formatStyleBlock(css);\n\n return opening[0] + '\\n ' + css + '\\n' + closing[1].trim();\n });\n }\n\n function cleanCode() {\n var code = cleanWhitespace(input.value);\n\n if (styleFormat.checked) {\n code = formatStyleBlocks(code);\n }\n\n output.value = code;\n status.textContent = 'Code cleaned.';\n }\n\n clean.addEventListener('click', cleanCode);\n\n copy.addEventListener('click', function () {\n if (!output.value) {\n cleanCode();\n }\n\n navigator.clipboard.writeText(output.value).then(function () {\n status.textContent = 'Result copied to clipboard.';\n }).catch(function () {\n output.focus();\n output.select();\n document.execCommand('copy');\n status.textContent = 'Result copied to clipboard.';\n });\n });\n\n clear.addEventListener('click', function () {\n input.value = '';\n output.value = '';\n status.textContent = '';\n input.focus();\n });\n })();\n <\/script>\n \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-36","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.relayed.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":1,"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/www.relayed.net\/index.php?rest_route=\/wp\/v2\/pages\/36\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/www.relayed.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}