Javascript Formatter / Beautifier in Javascript

We are going to create a javascript formatter using the JS Beautifier library. We will create a formatter using the JS Beautifier library's js_beautify(STRING) function.

How to use Javascript Formatter?

  • Paste your Javascript code into the textbox.
  • Click on the format button.
  • Your Result is ready to copy

How to add Javascript Formater code on your HTML page using javascript?

JS Beautifier library CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.js"></script>

Syntax:

var js_string = STRING;

var beautify_js = js_beautify(js_string);

console.log(beautify_js);

SOURCE CODE:

<html>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.js"></script>
        <script>
            function formatter() {
                var js = document.querySelector(".result").value;
                console.log(js);
                var beautify_js = js_beautify(js);
                document.querySelector(".result").value = beautify_js;
                console.log(beautify_js);
            }
        </script>
    </head>

    <body>
        <div class="card">
            <div class="card-body">
                <h1>Javascript Formatter / Beautifier</h1>
                <div class="form-group">
                    <textarea class="form-control result" rows="10"></textarea>
                </div>
                <button class="btn btn-primary" onclick="formatter()">FORMAT</button>
            </div>
        </div>
    </body>

</html>

Related Posts:

HTML Formatter / Beautifier in Javascript

Format your HTML file code with the help of HTML formatter. The html formatter makes it easy to read your html code. Using JS Beautifier library we can format HTML File...read more