{"id":693,"date":"2023-03-03T04:25:49","date_gmt":"2023-03-03T04:25:49","guid":{"rendered":"https:\/\/www.toolkit.keywordfinder.us\/?page_id=693"},"modified":"2023-03-03T04:25:49","modified_gmt":"2023-03-03T04:25:49","slug":"code-cleaner","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/de\/code-cleaner\/","title":{"rendered":"Code Cleaner"},"content":{"rendered":"<div>\n  <label for=\"code-input\">Enter your code:<\/label>\n  <textarea id=\"code-input\" placeholder=\"Paste your code here\"><\/textarea>\n  <button id=\"clean-button\" onclick=\"cleanCode()\">Clean Code<\/button>\n<\/div>\n\n<div id=\"code-container\">\n  <h2>Original Code:<\/h2>\n  <pre id=\"original-code\"><\/pre>\n  <h2>Cleaned Code:<\/h2>\n  <pre id=\"cleaned-code\"><\/pre>\n  <h2>Removed Lines:<\/h2>\n  <pre id=\"removed-lines\"><\/pre>\n<\/div>\n\n<div id=\"size-container\">\n  <p>Original Page Size: <span id=\"original-size\"><\/span> bytes<\/p>\n  <p>Cleaned Code Size: <span id=\"cleaned-size\"><\/span> bytes<\/p>\n<\/div>\n\n<div>\n  <button id=\"copy-button\" onclick=\"copyCode()\">Copy Code<\/button>\n  <button id=\"download-button\" onclick=\"downloadCode()\">Download Code<\/button>\n<\/div>\n\n<style>\n\/* Styles for the code input section *\/\n#code-input {\n  display: block;\n  width: 100%;\n  height: 200px;\n  margin-bottom: 10px;\n  padding: 10px;\n  font-family: monospace;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n#clean-button {\n  background-color: #4CAF50;\n  color: white;\n  padding: 10px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n}\n\n#clean-button:hover {\n  background-color: #3e8e41;\n}\n\n\/* Styles for the code container section *\/\n#code-container {\n  margin-top: 30px;\n}\n\n#code-container h2 {\n  margin-top: 30px;\n}\n\n#original-code,\n#cleaned-code,\n#removed-lines {\n  display: block;\n  width: 100%;\n  margin-bottom: 10px;\n  padding: 10px;\n  font-family: monospace;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n  white-space: pre-wrap;\n}\n\n\/* Styles for the size container section *\/\n#size-container {\n  margin-top: 30px;\n}\n\n#size-container p {\n  margin-bottom: 10px;\n}\n\n#original-size,\n#cleaned-size {\n  font-weight: bold;\n}\n\n\/* Styles for the copy and download buttons section *\/\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  padding: 10px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  margin-right: 10px;\n}\n\nbutton:hover {\n  background-color: #3e8e41;\n}\n\n<\/style>\n\n<script>\nfunction cleanCode() {\n  const originalCode = document.getElementById('code-input').value;\n  document.getElementById('original-code').textContent = originalCode;\n\n  const cleanedCode = originalCode.replace(\/<!--([\\s\\S]*?)-->\/g, '') \/\/ remove HTML comments\n    .replace(\/\\s+(?=[^<]*>)\/g, '') \/\/ remove white spaces outside of tags\n    .replace(\/\\s+$\/gm, '') \/\/ remove trailing white spaces\n    .replace(\/^\\s+\/gm, ''); \/\/ remove leading white spaces\n  document.getElementById('cleaned-code').textContent = cleanedCode;\n\n  const originalLines = originalCode.split('\\n');\n  const cleanedLines = cleanedCode.split('\\n');\n  const removedLines = originalLines.filter(line => !cleanedLines.includes(line));\n  document.getElementById('removed-lines').textContent = removedLines.join('\\n');\n\n  const originalSize = new Blob([originalCode]).size;\n  const cleanedSize = new Blob([cleanedCode]).size;\n  document.getElementById('original-size').textContent = originalSize;\n  document.getElementById('cleaned-size').textContent = cleanedSize;\n\n  document.getElementById('copy-button').disabled = false;\n  document.getElementById('download-button').disabled = false;\n}\n\nfunction copyCode() {\n  const cleanedCode = document.getElementById('cleaned-code').textContent;\n  navigator.clipboard.writeText(cleanedCode);\n}\n\nfunction downloadCode() {\n  const cleanedCode = document.getElementById('cleaned-code').textContent;\n  const blob = new Blob([cleanedCode], {type: 'text\/plain;charset=utf-8'});\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.style.display = 'none';\n  a.href = url;\n  a.download = 'cleaned-code.txt';\n  document.body.appendChild(a);\n  a.click();\n  URL.revokeObjectURL(url);\n  document.body.removeChild(a);\n}\n\ndocument.getElementById('copy-button').disabled = true;\ndocument.getElementById('download-button').disabled = true;\n\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Enter your code: Clean Code Original Code: Cleaned Code: Removed Lines: Original Page Size: bytes Cleaned Code Size: bytes Copy Code Download Code<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-693","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/de\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/693\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/media?parent=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}