Build an Online Tool to Unminify JS, HTML, CSS, XML and JSON Source Code

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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.">
<title>Unminify JS, CSS, HTML</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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 ;}textarea{padding:15px 20px;font-family:Arial;font-size:14px;letter-spacing:.1px;color:#34495e;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}.share a:hover{color:#6fc14a}h3{font-size:18px;}footer{margin:15px 0 20px 0;color:#ccc;font-size:14px}footer a{color:#98d37e ;}</style>
</head>
<body>
<main role="main" class="container">
<h1 class="mt-3">Unminify JS, CSS, HTML</h1>
<p class="lead">Free tool to unminify JS, CSS, HTML</p>
<div class="form">
<div class="form-group">
<textarea class="form-control" id="textarea" name="textarea" placeholder="Paste JS, CSS, HTML code..."></textarea>
</div>
<div class="form-group">
<button class="btn btn-success" >

script.js

function isCss(a) {
    if (/\w+\s*?\{[\s\S]+?\}/.test(a) && !/<(style).*?>[\s\S]+?<\/\1>/.test(a)) {
        return true
    }
}

function isJs(a) {
    if ((/function\s*?\w+\s*?\(.*?\)\s*?\{[\s\S]+?\}/.test(a) || /var\s*?\w+\s*?\=/.test(a)) && !/<(script).*?>[\s\S]+?<\/\1>/.test(a)) {
        return true
    }
}

function isHtml(a) {
    if (/<(\w+).*?>[\s\S]+?<\/\1>/.test(a)) {
        return true
    }
}

function unminify() {
    var a = document.getElementById('textarea').value;
    if (isCss(a) && !isJs(a)) {
        console.log('Css');
        a = css_beautify(a)
    } else if (isJs(a)) {
        console.log('Js');
        a = js_beautify(a)
    } else if (isHtml(a)) {
        console.log('Html');
        a = html_beautify(a)
    } else {
        a = html_beautify(a)
    }
    document.getElementById('textarea').value = a;
    document.querySelector('#textarea').style.color = "#34495e"
}

function copyUnminify() {
    var a = document.querySelector('#textarea');
    a.select();
    try {
        var b = document.execCommand('copy');
        var c = b ? 'Success' : 'Unsuccess';
        alert(c + '! Copied successfully. Please paste anywhere.')
    } catch (err) {
        alert('Oops, unable to copy !')
    }
}

function eraseText() {
    document.getElementById("textarea").value = ""
}

Furqan

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.