Skip to content

Instantly share code, notes, and snippets.

@rajendarreddyj

rajendarreddyj/prettyprint.html

Last active January 24, 2021 16:46
Show Gist options
  • Save rajendarreddyj/e5204bf34e978693dc59e8d8aa29c125 to your computer and use it in GitHub Desktop.
Save rajendarreddyj/e5204bf34e978693dc59e8d8aa29c125 to your computer and use it in GitHub Desktop.
Download ZIP
prettify xml/html/json/sql
Raw
prettyprint.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pretty print or minify text in XML, JSON, CSS and SQL formats</title>
<meta name="keywords" content="pretty, print, minify, text, xml, json, css, sql, formats, formatter, beautify" />
<meta name="description" content="Pretty print or minify text in XML, JSON, CSS and SQL formats" />
<style type="text/css">
#cssxOutput {
font-family: monospace, arial, sans-serif;
font-size: 13px;
font-weight: normal;
}
</style>
<script type="text/javascript" language="JavaScript">
//<![CDATA[
function jsxReset() {
document.getElementById('cssxMethod').value = "p";
document.getElementById('cssxFormat').value = "xml";
document.getElementById('cssxIdent').value = "4";
document.getElementById('cssxVisualize').value = "n";
document.getElementById('cssxPreserve').value = "n";
document.getElementById('cssxPreserve').disabled = true;
}
function jsxToggle() {
var method = document.getElementById('cssxMethod').value;
var format = document.getElementById('cssxFormat').value;
if (method == "m") {
document.getElementById('cssxIdent').disabled = true;
document.getElementById('cssxVisualize').disabled = true;
if (format == "xml" || format == "css") {
document.getElementById('cssxPreserve').disabled = false;
}
else {
document.getElementById('cssxPreserve').disabled = true;
}
}
else {
document.getElementById('cssxIdent').disabled = false;
document.getElementById('cssxVisualize').disabled = false;
document.getElementById('cssxPreserve').disabled = true;
}
}
function jsxAddMarkers(visualize, indent) {
var line = "";
for (var i = 0; i < indent; i++) {
line += visualize;
}
return line;
}
function jsxFormat(returnOutput) {
document.getElementById("css-Message").innerHTML = "";
jsxClearOutput();
var method = document.getElementById('cssxMethod').value;
var input = document.getElementById('cssxInput').value;
var format = document.getElementById('cssxFormat').value;
var indent = document.getElementById('cssxIdent').value;
var visualize = document.getElementById('cssxVisualize').value;
var preserve = document.getElementById('cssxPreserve').value;
// Remove leading and trailing spaces
input = input.trim();
var errMessage = "";
// Set default values
if (method != "p" && method != "m") {
method = "p";
}
if (format != "xml" && format != "json" && format != "css" && format != "sql") {
format = "xml";
}
if (indent != "1" && indent != "2" && indent != "3" && indent != "4" && indent != "5" && indent != "6" && indent != "7" && indent != "8") {
indent = 4;
}
else {
indent = parseInt(indent);
}
if (visualize != "n" && visualize != "-" && visualize != "." && visualize != "=" && visualize != "*") {
visualize = "n";
}
if (visualize != "n") {
indent = jsxAddMarkers(visualize, indent);
}
if (preserve != "n" && preserve != "y") {
preserve = false;
}
else {
if (preserve == "n") {
preserve = false;
}
else if (preserve == "y") {
preserve = true;
}
}
if (input == "") {
errMessage += "* Input is empty.<br />";
}
if (errMessage != "") {
document.getElementById("css-Message").innerHTML = "<br />" + errMessage;
}
else {
var output = "";
if (input != "") {
if (method == "p") {
// Pretty print
if (format == "xml") {
output = vkbeautify.xml(input, indent);
}
else if (format == "json") {
output = vkbeautify.json(input, indent);
}
else if (format == "css") {
output = vkbeautify.css(input, indent);
}
else if (format == "sql") {
output = vkbeautify.sql(input, indent);
}
}
else if (method == "m") {
// Minify
if (format == "xml") {
output = vkbeautify.xmlmin(input, preserve);
}
else if (format == "json") {
output = vkbeautify.jsonmin(input);
}
else if (format == "css") {
output = vkbeautify.cssmin(input, preserve);
}
else if (format == "sql") {
output = vkbeautify.sqlmin(input);
}
}
}
if (returnOutput) {
return output;
}
else {
document.getElementById("cssxOutput").value = output;
gotoResult();
}
}
}
function jsxClearFields() {
document.getElementById("cssxInput").value = "";
document.getElementById("css-Message").innerHTML = "";
jsxClearOutput();
}
function jsxClearOutput() {
document.getElementById("cssxOutput").value = "";
}
function gotoResult() {
location.href = "#pretty_print_output";
}
function selectAll(form) {
form.focus();
form.select();
}
//]]>
</script>
<script type="text/javascript" language="JavaScript">
/**
* vkBeautify - javascript plugin to pretty-print or minify text in XML, JSON, CSS and SQL formats.
*
* Version - 0.99.00.beta
* Copyright (c) 2012 Vadim Kiryukhin
* vkiryukhin @ gmail.com
* http://www.eslinstructor.net/vkbeautify/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Pretty print
*
* vkbeautify.xml(text [,indent_pattern]);
* vkbeautify.json(text [,indent_pattern]);
* vkbeautify.css(text [,indent_pattern]);
* vkbeautify.sql(text [,indent_pattern]);
*
* @text - String; text to beatufy;
* @indent_pattern - Integer | String;
* Integer: number of white spaces;
* String: character string to visualize indentation ( can also be a set of white spaces )
* Minify
*
* vkbeautify.xmlmin(text [,preserve_comments]);
* vkbeautify.jsonmin(text);
* vkbeautify.cssmin(text [,preserve_comments]);
* vkbeautify.sqlmin(text);
*
* @text - String; text to minify;
* @preserve_comments - Bool; [optional];
* Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )
*
* Examples:
* vkbeautify.xml(text); // pretty print XML
* vkbeautify.json(text, 4 ); // pretty print JSON
* vkbeautify.css(text, '. . . .'); // pretty print CSS
* vkbeautify.sql(text, '----'); // pretty print SQL
*
* vkbeautify.xmlmin(text, true);// minify XML, preserve comments
* vkbeautify.jsonmin(text);// minify JSON
* vkbeautify.cssmin(text);// minify CSS, remove comments ( default )
* vkbeautify.sqlmin(text);// minify SQL
*
*/
(function () {
function createShiftArr(step) {
var space = ' ';
if (isNaN(parseInt(step))) { // argument is string
space = step;
}
else { // argument is integer
switch (step) {
case 1:
space = ' ';
break;
case 2:
space = ' ';
break;
case 3:
space = ' ';
break;
case 4:
space = ' ';
break;
case 5:
space = ' ';
break;
case 6:
space = ' ';
break;
case 7:
space = ' ';
break;
case 8:
space = ' ';
break;
case 9:
space = ' ';
break;
case 10:
space = ' ';
break;
case 11:
space = ' ';
break;
case 12:
space = ' ';
break;
}
}
var shift = ['\n']; // array of shifts
for (ix = 0; ix < 100; ix++) {
shift.push(shift[ix] + space);
}
return shift;
}
function vkbeautify() {
this.step = ' '; // 4 spaces
this.shift = createShiftArr(this.step);
};
vkbeautify.prototype.xml = function (text, step) {
var ar = text.replace(/>\s{0,}</g, "><").replace(/</g, "~::~<").replace(/\s*xmlns\:/g, "~::~xmlns:").replace(/\s*xmlns\=/g, "~::~xmlns=").split('~::~')
, len = ar.length
, inComment = false
, deep = 0
, str = ''
, ix = 0
, shift = step ? createShiftArr(step) : this.shift;
for (ix = 0; ix < len; ix++) {
// start comment or <![CDATA[...]]> or <!DOCTYPE //
if (ar[ix].search(/<!/) > -1) {
str += shift[deep] + ar[ix];
inComment = true;
// end comment or <![CDATA[...]]> //
if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1) {
inComment = false;
}
}
else
// end comment or <![CDATA[...]]> //
if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) {
str += ar[ix];
inComment = false;
}
else
// <elm></elm> //
if (/^<\w/.exec(ar[ix - 1]) && /^<\/\w/.exec(ar[ix]) && /^<[\w:\-\.\,]+/.exec(ar[ix - 1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/', '')) {
str += ar[ix];
if (!inComment) deep--;
}
else
// <elm> //
if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1) {
str = !inComment ? str += shift[deep++] + ar[ix] : str += ar[ix];
}
else
// <elm>...</elm> //
if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
str = !inComment ? str += shift[deep] + ar[ix] : str += ar[ix];
}
else
// </elm> //
if (ar[ix].search(/<\//) > -1) {
str = !inComment ? str += shift[--deep] + ar[ix] : str += ar[ix];
}
else
// <elm/> //
if (ar[ix].search(/\/>/) > -1) {
str = !inComment ? str += shift[deep] + ar[ix] : str += ar[ix];
}
else
// <? xml ... ?> //
if (ar[ix].search(/<\?/) > -1) {
str += shift[deep] + ar[ix];
}
else
// xmlns //
if (ar[ix].search(/xmlns\:/) > -1 || ar[ix].search(/xmlns\=/) > -1) {
str += shift[deep] + ar[ix];
}
else {
str += ar[ix];
}
}
return (str[0] == '\n') ? str.slice(1) : str;
}
vkbeautify.prototype.json = function (text, step) {
var step = step ? step : this.step;
if (typeof JSON === 'undefined') return text;
if (typeof text === "string") return JSON.stringify(JSON.parse(text), null, step);
if (typeof text === "object") return JSON.stringify(text, null, step);
return text; // text is not string nor object
}
vkbeautify.prototype.css = function (text, step) {
var ar = text.replace(/\s{1,}/g, ' ').replace(/\{/g, "{~::~").replace(/\}/g, "~::~}~::~").replace(/\;/g, ";~::~").replace(/\/\*/g, "~::~/*").replace(/\*\//g, "*/~::~").replace(/~::~\s{0,}~::~/g, "~::~").split('~::~')
, len = ar.length
, deep = 0
, str = ''
, ix = 0
, shift = step ? createShiftArr(step) : this.shift;
for (ix = 0; ix < len; ix++) {
if (/\{/.exec(ar[ix])) {
str += shift[deep++] + ar[ix];
}
else
if (/\}/.exec(ar[ix])) {
str += shift[--deep] + ar[ix];
}
else
if (/\*\\/.exec(ar[ix])) {
str += shift[deep] + ar[ix];
}
else {
str += shift[deep] + ar[ix];
}
}
return str.replace(/^\n{1,}/, '');
}
//----------------------------------------------------------------------------
function isSubquery(str, parenthesisLevel) {
return parenthesisLevel - (str.replace(/\(/g, '').length - str.replace(/\)/g, '').length)
}
function split_sql(str, tab) {
return str.replace(/\s{1,}/g, " ").replace(/ AND /ig, "~::~" + tab + tab + "AND ").replace(/ BETWEEN /ig, "~::~" + tab + "BETWEEN ").replace(/ CASE /ig, "~::~" + tab + "CASE ").replace(/ ELSE /ig, "~::~" + tab + "ELSE ").replace(/ END /ig, "~::~" + tab + "END ").replace(/ FROM /ig, "~::~FROM ").replace(/ GROUP\s{1,}BY/ig, "~::~GROUP BY ").replace(/ HAVING /ig, "~::~HAVING ")
//.replace(/ SET /ig," SET~::~")
.replace(/ IN /ig, " IN ").replace(/ JOIN /ig, "~::~JOIN ").replace(/ CROSS~::~{1,}JOIN /ig, "~::~CROSS JOIN ").replace(/ INNER~::~{1,}JOIN /ig, "~::~INNER JOIN ").replace(/ LEFT~::~{1,}JOIN /ig, "~::~LEFT JOIN ").replace(/ RIGHT~::~{1,}JOIN /ig, "~::~RIGHT JOIN ").replace(/ ON /ig, "~::~" + tab + "ON ").replace(/ OR /ig, "~::~" + tab + tab + "OR ").replace(/ ORDER\s{1,}BY/ig, "~::~ORDER BY ").replace(/ OVER /ig, "~::~" + tab + "OVER ").replace(/\(\s{0,}SELECT /ig, "~::~(SELECT ").replace(/\)\s{0,}SELECT /ig, ")~::~SELECT ").replace(/ THEN /ig, " THEN~::~" + tab + "").replace(/ UNION /ig, "~::~UNION~::~").replace(/ USING /ig, "~::~USING ").replace(/ WHEN /ig, "~::~" + tab + "WHEN ").replace(/ WHERE /ig, "~::~WHERE ").replace(/ WITH /ig, "~::~WITH ")
//.replace(/\,\s{0,}\(/ig,",~::~( ")
//.replace(/\,/ig,",~::~"+tab+tab+"")
.replace(/ ALL /ig, " ALL ").replace(/ AS /ig, " AS ").replace(/ ASC /ig, " ASC ").replace(/ DESC /ig, " DESC ").replace(/ DISTINCT /ig, " DISTINCT ").replace(/ EXISTS /ig, " EXISTS ").replace(/ NOT /ig, " NOT ").replace(/ NULL /ig, " NULL ").replace(/ LIKE /ig, " LIKE ").replace(/\s{0,}SELECT /ig, "SELECT ").replace(/\s{0,}UPDATE /ig, "UPDATE ").replace(/ SET /ig, " SET ").replace(/~::~{1,}/g, "~::~").split('~::~');
}
vkbeautify.prototype.sql = function (text, step) {
var ar_by_quote = text.replace(/\s{1,}/g, " ").replace(/\'/ig, "~::~\'").split('~::~')
, len = ar_by_quote.length
, ar = []
, deep = 0
, tab = this.step, //+this.step,
inComment = true
, inQuote = false
, parenthesisLevel = 0
, str = ''
, ix = 0
, shift = step ? createShiftArr(step) : this.shift;;
for (ix = 0; ix < len; ix++) {
if (ix % 2) {
ar = ar.concat(ar_by_quote[ix]);
}
else {
ar = ar.concat(split_sql(ar_by_quote[ix], tab));
}
}
len = ar.length;
for (ix = 0; ix < len; ix++) {
parenthesisLevel = isSubquery(ar[ix], parenthesisLevel);
if (/\s{0,}\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
ar[ix] = ar[ix].replace(/\,/g, ",\n" + tab + tab + "")
}
if (/\s{0,}\s{0,}SET\s{0,}/.exec(ar[ix])) {
ar[ix] = ar[ix].replace(/\,/g, ",\n" + tab + tab + "")
}
if (/\s{0,}\(\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
deep++;
str += shift[deep] + ar[ix];
}
else
if (/\'/.exec(ar[ix])) {
if (parenthesisLevel < 1 && deep) {
deep--;
}
str += ar[ix];
}
else {
str += shift[deep] + ar[ix];
if (parenthesisLevel < 1 && deep) {
deep--;
}
}
var junk = 0;
}
str = str.replace(/^\n{1,}/, '').replace(/\n{1,}/g, "\n");
return str;
}
vkbeautify.prototype.xmlmin = function (text, preserveComments) {
var str = preserveComments ? text : text.replace(/\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>/g, "").replace(/[ \r\n\t]{1,}xmlns/g, ' xmlns');
return str.replace(/>\s{0,}</g, "><");
}
vkbeautify.prototype.jsonmin = function (text) {
if (typeof JSON === 'undefined') return text;
return JSON.stringify(JSON.parse(text), null, 0);
}
vkbeautify.prototype.cssmin = function (text, preserveComments) {
var str = preserveComments ? text : text.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g, "");
return str.replace(/\s{1,}/g, ' ').replace(/\{\s{1,}/g, "{").replace(/\}\s{1,}/g, "}").replace(/\;\s{1,}/g, ";").replace(/\/\*\s{1,}/g, "/*").replace(/\*\/\s{1,}/g, "*/");
}
vkbeautify.prototype.sqlmin = function (text) {
return text.replace(/\s{1,}/g, " ").replace(/\s{1,}\(/, "(").replace(/\s{1,}\)/, ")");
}
window.vkbeautify = new vkbeautify();
})();
</script>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en" /> </head>
<body>
<a name="top" id="top"></a>
<div id="container">
<div id="main">
<h2 class="css-SectionTitle">Pretty print or minify text input for XML, JSON, CSS and SQL formats:</h2>
<div id="content">
<table summary="" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<h2 class="css-SectionTitle">Pretty print or minify text Input:</h2>
<br />
<form name="inputForm" id="inputForm" method="post" action="javascript:void(null);">
<table summary="" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="300">Apply method <span class="css-ContactFormRequired">*</span>:</td>
<td>
<select name="cssxMethod" id="cssxMethod" tabindex='100' onchange="jsxToggle();">
<option value="p" selected="selected">Pretty print</option>
<option value="m">Minify</option>
</select>
</td>
</tr>
<tr>
<td>Input XML, JSON, CSS or SQL text <span class="css-ContactFormRequired">*</span>:</td>
<td>
<textarea cols="55" rows="10" name="cssxInput" id="cssxInput" tabindex='102' wrap="off"></textarea>
</td>
</tr>
<tr>
<td>Input type <span class="css-ContactFormRequired">*</span>:</td>
<td>
<select name="cssxFormat" id="cssxFormat" tabindex='105' onchange="jsxToggle();">
<option value="css">CSS</option>
<option value="json">JSON</option>
<option value="sql">SQL</option>
<option value="xml" selected="selected">XML</option>
</select>
</td>
</tr>
<tr>
<td>Indent (number of white spaces) <span class="css-ContactFormRequired">*</span>:</td>
<td>
<select name="cssxIdent" id="cssxIdent" tabindex='108'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="selected">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td>Visualize indentation <span class="css-ContactFormRequired">*</span>:</td>
<td>
<select name="cssxVisualize" id="cssxVisualize" tabindex='110'>
<option value="n" selected="selected">No</option>
<option value="-">Yes, with: -</option>
<option value=".">Yes, with: .</option>
<option value="=">Yes, with: =</option>
<option value="*">Yes, with: *</option>
</select>
</td>
</tr>
<tr>
<td>Preserve comments (XML and CSS only) <span class="css-ContactFormRequired">*</span>:</td>
<td>
<select name="cssxPreserve" id="cssxPreserve" tabindex='115' disabled="disabled">
<option value="n" selected="selected">No</option>
<option value="y">Yes</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="1" valign="top"> <span class="css-ContactFormRequired">* = required</span> </td>
<td>
<input type="submit" name="format" value="Format" id="css-XajaxButton" style="width: 100px" class="css-Button" tabindex="200" onclick="jsxFormat();" /> &nbsp;&nbsp;&nbsp;
<input type="button" name="reset" value="Clear" class="css-Button" style="width: 100px" onclick="jsxClearFields()" tabindex="205" /> &nbsp;&nbsp;&nbsp; </td>
<div id="css-Message"></div>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</td>
<td>
<h2 class="css-SectionTitle">Pretty print or minify text output:</h2>
<br />
<form name="outputForm" method="post" action="javascript:void(null);">
<input onclick="selectAll(outputForm.cssxOutput);" value="Select all" style="width: 100px;" class="css-Button" tabindex="300" type="button" /> &nbsp;&nbsp;&nbsp;
<input name="cssxReset" value="Clear" class="css-Button" style="width: 100px;" onclick="jsxClearOutput()" tabindex="305" type="button" />
<br />
<br />
<textarea cols="85" rows="20" name="cssxOutput" id="cssxOutput" wrap="off" tabindex='310'></textarea>
</form>
</td>
</tr>
</table>
</div>
<!-- end content -->
</div>
<!-- End main -->
</div>
<!-- End container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment