{"id":3119,"date":"2022-09-13T15:24:03","date_gmt":"2022-09-13T10:24:03","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3119"},"modified":"2022-09-13T15:24:05","modified_gmt":"2022-09-13T10:24:05","slug":"build-an-online-tool-to-unminify-js-html-css-xml-json-source-code","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/","title":{"rendered":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code"},"content":{"rendered":"\n

In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using JavaScript, HTML, and CSS. You can get the source code for this project below.<\/p>\n\n\n\n

\n\n\n\n

Unminify JS, HTML, CSS, XML and JSON Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\n<meta name="description" content="Free online tool to unminify JS, CSS, HTML compressed code, making it readable again. Unminify, uncompress and beautify any minified JS, CSS, HTML code.">\n<title>Unminify JS, CSS, HTML<\/title>\n<link href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" rel="stylesheet">\n<link href="https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css" rel="stylesheet">\n<style>html{position:relative;min-height:100%}body{background:#f9f9f9;}.container{width:auto;max-width:850px;padding:0 15px;text-align:center;font-size:15px}h1{color:#ff6600 !important;}textarea{padding:15px 20px;font-family:Arial;font-size:14px;letter-spacing:.1px;color:#34495e!important;line-height:30px;white-space:pre;word-wrap:normal;overflow-x:scroll;min-height:315px;margin-bottom:20px}.btn{padding:8px 30px;margin:8px}.form{margin:30px 0 20px 0}.share{font-size:35px}.share a{margin-left:10px;margin-right:10px;color:#98d37e!important}.share a:hover{color:#6fc14a!important}h3{font-size:18px;}footer{margin:15px 0 20px 0;color:#ccc!important;font-size:14px!important}footer a{color:#98d37e !important;}<\/style>\n<\/head>\n<body>\n<main role="main" class="container">\n<h1 class="mt-3">Unminify JS, CSS, HTML<\/h1>\n<p class="lead">Free tool to unminify JS, CSS, HTML<\/p>\n<div class="form">\n<div class="form-group">\n<textarea class="form-control" id="textarea" name="textarea" placeholder="Paste JS, CSS, HTML code..."><\/textarea>\n<\/div>\n<div class="form-group">\n<button class="btn btn-success" onclick="unminify(); return false;">Unminify<\/button>\n<button class="btn btn-secondary" onclick="eraseText(); return false;">Clear<\/button>\n<button class="btn btn-secondary" onclick="copyUnminify(); return false;">Copy<\/button>\n<\/div>\n<\/div>\n<\/main>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-beautify\/1.7.5\/beautify.min.js"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-beautify\/1.7.5\/beautify-css.min.js"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-beautify\/1.7.5\/beautify-html.min.js"><\/script>\n<script src="script.js"><\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
function isCss(a) {\n    if (\/\\w+\\s*?\\{[\\s\\S]+?\\}\/.test(a) && !\/<(style).*?>[\\s\\S]+?<\\\/\\1>\/.test(a)) {\n        return true\n    }\n}\n\nfunction isJs(a) {\n    if ((\/function\\s*?\\w+\\s*?\\(.*?\\)\\s*?\\{[\\s\\S]+?\\}\/.test(a) || \/var\\s*?\\w+\\s*?\\=\/.test(a)) && !\/<(script).*?>[\\s\\S]+?<\\\/\\1>\/.test(a)) {\n        return true\n    }\n}\n\nfunction isHtml(a) {\n    if (\/<(\\w+).*?>[\\s\\S]+?<\\\/\\1>\/.test(a)) {\n        return true\n    }\n}\n\nfunction unminify() {\n    var a = document.getElementById('textarea').value;\n    if (isCss(a) && !isJs(a)) {\n        console.log('Css');\n        a = css_beautify(a)\n    } else if (isJs(a)) {\n        console.log('Js');\n        a = js_beautify(a)\n    } else if (isHtml(a)) {\n        console.log('Html');\n        a = html_beautify(a)\n    } else {\n        a = html_beautify(a)\n    }\n    document.getElementById('textarea').value = a;\n    document.querySelector('#textarea').style.color = "#34495e"\n}\n\nfunction copyUnminify() {\n    var a = document.querySelector('#textarea');\n    a.select();\n    try {\n        var b = document.execCommand('copy');\n        var c = b ? 'Success' : 'Unsuccess';\n        alert(c + '! Copied successfully. Please paste anywhere.')\n    } catch (err) {\n        alert('Oops, unable to copy !')\n    }\n}\n\nfunction eraseText() {\n    document.getElementById("textarea").value = ""\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using JavaScript, HTML, and CSS. You can get the source code for this project below. Unminify JS, HTML, CSS, XML and JSON Source Code index.html script.js<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nBuild an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-13T10:24:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-13T10:24:05+00:00\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code","description":"In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/","og_locale":"en_US","og_type":"article","og_title":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code","og_description":"In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using","og_url":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-13T10:24:03+00:00","article_modified_time":"2022-09-13T10:24:05+00:00","author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code","datePublished":"2022-09-13T10:24:03+00:00","dateModified":"2022-09-13T10:24:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/"},"wordCount":70,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/","url":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/","name":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-13T10:24:03+00:00","dateModified":"2022-09-13T10:24:05+00:00","description":"In this tutorial, I will teach you how to make an online tool that can unminify JS, HTML, CSS, XML, and JSON source code. This tool is written using","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/build-an-online-tool-to-unminify-js-html-css-xml-json-source-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3119"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3119\/revisions"}],"predecessor-version":[{"id":3120,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3119\/revisions\/3120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}