2010-12-06 19:03:09 +00:00
<!DOCTYPE html>
2011-05-02 13:34:37 +00:00
<!-- [if lt IE 7 ]> <html lang="en - us" dir="ltr" class="ie ie6"> <![endif] -->
<!-- [if IE 7 ]> <html lang="en - us" dir="ltr" class="ie ie7"> <![endif] -->
<!-- [if IE 8 ]> <html lang="en - us" dir="ltr" class="ie ie8"> <![endif] -->
<!-- [if IE 9 ]> <html lang="en - us" dir="ltr" class="ie ie9"> <![endif] -->
<!-- [if (gt IE 9)|!(IE)]><! --> < html lang = "en-us" dir = "ltr" > <!-- <![endif] -->
2009-05-15 23:46:54 +00:00
< head >
2011-05-02 13:16:34 +00:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > Online javascript beautifier< / title >
< style type = "text/css" >
* {
margin: 0;
padding: 0;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:34:37 +00:00
.ie6 div {
display: none
}
.ie6 #ie6-go-away {
display: block !important;
}
img {
border: 0;
display: block;
vertical-align: baseline;
}
2011-05-02 13:16:34 +00:00
#blurb {
width: 260px;
float: right;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#beauty {
border-top: 1px solid #f6f6f6;
margin-left: 5px;
margin-right: 270px;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
body {
background: #eee;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
body, button, select, label {
font:13px/1.231 arial, sans-serif;
*font-size:small;
2009-08-18 01:07:18 +00:00
}
2011-05-02 13:16:34 +00:00
select, label {
font-size: 12px;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
body, html {
height: 100%;
color: #333;
2010-12-11 07:36:34 +00:00
}
2011-05-02 13:16:34 +00:00
textarea {
color: #444;
2011-05-02 13:34:37 +00:00
height: 100%;
width: 100%;
border: 0;
}
.ie7 fieldset#textarea-wrap {
padding: 5px 0;
}
.ie8 fieldset#textarea-wrap {
padding: 5px 0 0 5px;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
fieldset {
2009-12-02 01:40:38 +00:00
border: 0;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
ul, li {
list-style: none;
2009-05-15 23:46:54 +00:00
}
a {
color: #36d;
}
2011-05-02 13:16:34 +00:00
fieldset#textarea-wrap {
height: auto;
position: absolute;
background: white;
left: 0;
top: 0px;
right: 0;
bottom: 0;
display: block;
margin-left: 5px;
margin-bottom: 5px;
margin-right: 270px;
margin-top: 40px;
border: 1px solid #ccc;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
2011-05-02 13:34:37 +00:00
padding: 5px;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
button#submit {
margin-top: 5px;
height: 30px;
line-height: 28px;
width: 100%;
border: 1px solid #aaa;
border-left: 1px solid #666;
border-top: 1px solid #666;
2011-06-22 17:53:30 +00:00
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
2011-05-02 13:16:34 +00:00
background: #ccc;
2011-06-22 17:53:30 +00:00
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#CCCCCC));
background-image: -webkit-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -moz-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -ms-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -o-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: linear-gradient(top, #EEEEEE, #CCCCCC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#CCCCCC');
2011-05-02 13:16:34 +00:00
cursor: pointer;
color: #444;
2010-02-06 00:30:49 +00:00
}
2011-05-02 13:16:34 +00:00
button#submit em {
font-size: 11px;
font-style: normal;
color: #999;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
label {
cursor: pointer;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#options {
margin-top: 5px;
margin-bottom: 15px;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#options li {
2010-12-06 19:03:09 +00:00
margin-bottom: 4px;
2011-05-02 13:16:34 +00:00
font-size: 90%;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#options select {
font:13px/1.231 arial, sans-serif;
padding: 0 5px;
width: 220px;
2010-12-06 19:03:09 +00:00
}
2011-05-02 13:16:34 +00:00
#tabsize {
margin-top: 2px;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#brace-style {
margin-bottom: 6px;
2009-11-27 02:55:09 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb h2 {
font-size: 12px;
font-weight: bold;
color: #555;
2009-05-15 23:46:54 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb p {
line-height: 140%;
font-size: 11px;
margin-right: 16px;
margin-bottom: 11px;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
#footer {
font-size: 11px;
line-height: 140%;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb p.me-me-me {
margin-bottom: 4px;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb p.contributors {
color: #666;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb #uses li {
font-size: 11px;
margin-bottom: 4px;
2011-06-13 20:27:03 +00:00
margin-right: 4px;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
#blurb #uses li.writeme {
font-style: normal;
color: #888;
margin-bottom: 30px;
line-height: 130%;
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
< / style >
< script type = "text/javascript" src = "jquery/jquery.js" > < / script >
< script type = "text/javascript" src = "jquery/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "beautify.js" > < / script >
< script type = "text/javascript" src = "beautify-html.js" > < / script >
< script type = "text/javascript" src = "tests/sanitytest.js" > < / script >
< script type = "text/javascript" src = "tests/beautify-tests.js" > < / script >
< script type = "text/javascript" src = "unpackers/javascriptobfuscator_unpacker.js" > < / script >
< script type = "text/javascript" src = "unpackers/urlencode_unpacker.js" > < / script >
< script type = "text/javascript" src = "unpackers/p_a_c_k_e_r_unpacker.js" > < / script >
< script type = "text/javascript" src = "unpackers/myobfuscate_unpacker.js" > < / script >
2010-12-06 19:03:09 +00:00
2011-05-02 13:16:34 +00:00
< script type = "text/javascript" >
var the = {
beautify_in_progress: false
2009-12-02 01:40:38 +00:00
}
2011-05-02 13:16:34 +00:00
function run_tests()
{
var st = new SanityTest();
run_beautifier_tests(st);
JavascriptObfuscator.run_tests(st);
P_A_C_K_E_R.run_tests(st);
Urlencoded.run_tests(st);
MyObfuscate.run_tests(st);
$('#testresults').html(st.results()).show();
2010-12-06 19:03:09 +00:00
}
2011-05-02 13:16:34 +00:00
function any(a, b)
{
return a ? a : b;
2010-12-06 19:03:09 +00:00
}
2011-05-02 13:16:34 +00:00
function read_settings_from_cookie()
{
$('#tabsize').val(any($.cookie('tabsize'), '4'));
$('#brace-style').val(any($.cookie('brace-style'), 'collapse'));
$('#detect-packers').attr('checked', $.cookie('detect-packers') !== 'off');
$('#preserve-newlines').attr('checked', $.cookie('preserve-newlines') !== 'off');
$('#keep-array-indentation').attr('checked', $.cookie('keep-array-indentation') === 'on');
2010-12-06 19:03:09 +00:00
}
2011-05-02 13:16:34 +00:00
function store_settings_to_cookie()
{
var opts = { expires: 360 };
$.cookie('tabsize', $('#tabsize').val(), opts);
$.cookie('brace-style', $('#brace-style').val(), opts);
$.cookie('detect-packers', $('#detect-packers').attr('checked') ? 'on' : 'off', opts);
$.cookie('preserve-newlines', $('#preserve-newlines').attr('checked') ? 'on' : 'off', opts);
$.cookie('keep-array-indentation', $('#keep-array-indentation').attr('checked') ? 'on' : 'off', opts);
2010-12-08 09:21:24 +00:00
}
2011-05-02 13:16:34 +00:00
2011-05-11 23:35:34 +00:00
function unpacker_filter(source)
2011-05-02 13:16:34 +00:00
{
2011-05-11 23:28:42 +00:00
var trailing_comments = '';
var comment = '';
var found = false;
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
2011-05-11 23:34:56 +00:00
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
2011-05-11 23:28:42 +00:00
} else if (/^\s*\/\//.test(source)) {
found = true;
2011-05-11 23:34:56 +00:00
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
2011-05-02 13:16:34 +00:00
}
2011-05-11 23:28:42 +00:00
} while (found);
2011-05-02 13:16:34 +00:00
2011-05-11 23:28:42 +00:00
if (P_A_C_K_E_R.detect(source)) {
source = unpacker_filter(P_A_C_K_E_R.unpack(source))
}
2011-05-02 13:16:34 +00:00
if (Urlencoded.detect(source)) {
2011-05-11 23:28:42 +00:00
source = unpacker_filter(Urlencoded.unpack(source))
2011-05-02 13:16:34 +00:00
}
2011-05-11 23:28:42 +00:00
if (JavascriptObfuscator.detect(source)) {
source = unpacker_filter(JavascriptObfuscator.unpack(source))
2011-05-02 13:16:34 +00:00
}
2011-05-11 23:28:42 +00:00
if (MyObfuscate.detect(source)) {
source = unpacker_filter(MyObfuscate.unpack(source))
2011-05-02 13:16:34 +00:00
}
2011-05-11 23:28:42 +00:00
2011-05-11 23:34:56 +00:00
return trailing_comments + source;
2011-05-02 13:16:34 +00:00
}
function beautify()
{
if (the.beautify_in_progress) return;
store_settings_to_cookie();
the.beautify_in_progress = true;
2011-07-15 14:32:07 +00:00
var source = $('#source').val();
2011-05-02 13:16:34 +00:00
var indent_size = $('#tabsize').val();
var indent_char = indent_size == 1 ? '\t' : ' ';
var preserve_newlines = $('#preserve-newlines').attr('checked');
var keep_array_indentation = $('#keep-array-indentation').attr('checked');
var brace_style = $('#brace-style').val();
if ($('#detect-packers').attr('checked')) {
source = unpacker_filter(source);
}
var comment_mark = '< - ' + ' - ' ;
2011-06-06 18:32:53 +00:00
var opts = {
2011-05-02 13:16:34 +00:00
indent_size: indent_size,
indent_char: indent_char,
preserve_newlines:preserve_newlines,
brace_style: brace_style,
keep_array_indentation:keep_array_indentation,
2011-06-06 18:32:53 +00:00
space_after_anon_function:true};
if (source & & source[0] === '< ' & & source.substring(0, 4) !== comment_mark) {
2011-05-02 13:16:34 +00:00
$('#source').val(
2011-06-06 18:32:53 +00:00
style_html(source, opts)
2011-05-02 13:16:34 +00:00
);
2011-06-06 18:32:53 +00:00
} else {
var v = js_beautify(unpacker_filter(source), opts);
$('#source').val(v);
2011-05-02 13:16:34 +00:00
}
the.beautify_in_progress = false;
2010-12-08 09:21:24 +00:00
}
2011-05-02 13:16:34 +00:00
$(function() {
2011-05-02 13:34:37 +00:00
if ($.browser.msie) {
$('#source').width( $('#textarea-wrap').width() - 10)
.height($('#textarea-wrap').height() - 10);
2011-05-02 13:16:34 +00:00
}
read_settings_from_cookie();
2011-05-02 13:34:37 +00:00
var default_text = "// This is just a sample script. Paste your real code here.\nif ('this_is'==/an_example/){of_beautifer();}else{var a=b?(c%d):e[f];}";
$('#source').val(default_text).bind('click focus', function () {
2011-05-02 13:16:34 +00:00
if ($(this).val() == default_text) {
$(this).val('');
}
}).bind('blur', function () {
if ($(this).val() == '') {
$(this).val(default_text);
}
})
$(window).bind('keydown', function (e) {
if (e.ctrlKey & & e.keyCode == 13) {
beautify();
}
})
$('#submit').bind('click', beautify);
$('select').bind('change', beautify);
});
< / script >
2009-05-15 23:46:54 +00:00
< / head >
< body >
2011-05-02 13:16:34 +00:00
< div id = "blurb" >
2009-12-02 01:40:38 +00:00
< fieldset id = "options" >
< ul >
< li > < select name = "tabsize" id = "tabsize" >
< option value = "1" > indent with a tab character< / option >
< option value = "2" > indent with 2 spaces< / option >
< option value = "3" > indent with 3 spaces< / option >
2011-05-02 13:16:34 +00:00
< option value = "4" > indent with 4 spaces< / option >
2009-12-02 01:40:38 +00:00
< option value = "8" > indent with 8 spaces< / option >
< / select > < / li >
2011-03-23 04:07:38 +00:00
< li > < select id = "brace-style" >
< option value = "collapse" > Braces with control statement< / option >
< option value = "expand" > Braces on own line< / option >
< option value = "end-expand" > End braces on own line< / option >
< / select > < / li >
2011-05-02 13:16:34 +00:00
< li > < input class = "checkbox" type = "checkbox" id = "preserve-newlines" / > < label for = "preserve-newlines" > Preserve empty lines?< / label > < br / > < / li >
< li > < input class = "checkbox" type = "checkbox" id = "detect-packers" / > < label for = "detect-packers" > Detect packers and obfuscators?< / label > < br / > < / li >
< li > < input class = "checkbox" type = "checkbox" id = "keep-array-indentation" / > < label for = "keep-array-indentation" > Keep array indentation?< / label > < / li >
2009-12-02 01:40:38 +00:00
< / ul >
< / fieldset >
2011-05-02 13:16:34 +00:00
< p > < strong > Beautify, unpack or deobfuscate javascript.< / strong > .< / p >
< p > All of the source code is available on the < a href = "http://github.com/einars/js-beautify" > github< / a > , and we have a < a href = "https://github.com/einars/js-beautify/raw/master/python/jsbeautifier.py" > command-line version< / a > (written in python) as well.
< p > JSBeautifier is — and always will be — completely free and open, and your thanks, flattrs and donations are very heartwarming — thank you all so much!
2011-05-02 13:34:37 +00:00
< div style = "position: relative; height: 40px" >
< form style = "position: absolute; left: 3px;" action = "https://www.paypal.com/cgi-bin/webscr" method = "post" >
2010-12-31 08:52:36 +00:00
< input type = "hidden" name = "cmd" value = "_s-xclick" >
< input type = "hidden" name = "hosted_button_id" value = "TL28UJK2ARCUJ" >
2011-03-28 03:10:13 +00:00
< input style = "border:0" type = "image" src = "http://spicausis.lv/misc/paypal-donate.gif" name = "submit" alt = "PayPal - The safer, easier way to pay online!" >
2010-12-31 08:52:36 +00:00
< img alt = "" src = "https://www.paypal.com/en_US/i/scr/pixel.gif" width = "1" height = "1" >
< / form >
2011-05-02 13:34:37 +00:00
< p style = "position: absolute; left: 120px; top: 1px" > < a href = "http://flattr.com/thing/94550/jsbeautifier-org" target = "_blank" > < img src = "http://api.flattr.com/button/flattr-badge-large.png" alt = "Flattr" / > < / a > < / p >
< / div >
2010-12-31 08:52:36 +00:00
2011-05-02 13:16:34 +00:00
< p > Browser extensions and other uses:< / p >
< ul id = "uses" >
2011-07-26 14:45:32 +00:00
2011-07-26 14:46:52 +00:00
< li > A < a href = "javascript:(function(){s=document.getElementsByTagName('SCRIPT');tx='';sr=[];for(i=0;i<s.length;i++){with(s.item(i)){t=text;if(t){tx+=t;}else{sr.push(src)};}};with(window.open()){document.write('<textarea id="t">'+(sr.join("\n"))+"\n\n-----\n\n"+tx+'</textarea><script src="http://jsbeautifier.org/beautify.js"></script><script>with(document.getElementById("t")){value=js_beautify(value);with(style){width="99%";height="99%";borderStyle="none";}};</script>');document.close();}})();" > < strong > bookmarklet< / strong > < / a > (drag it to your bookmarks) by Ichiro Hiroshi to see all scripts used on the page,< / li >
2011-07-26 14:45:32 +00:00
2011-05-02 13:16:34 +00:00
< li > < strong > Chrome< / strong > : < a href = "https://github.com/rixth/jsbeautify-for-chrome" > jsbeautify-for-chrome< / a > by Tom Rix,< / li >
< li > < strong > Chrome< / strong > : < a href = "https://chrome.google.com/webstore/detail/piekbefgpgdecckjcpffhnacjflfoddg" > Pretty Beautiful Javascript< / a > by Will McSweeney,< / li >
< li > < strong > Safari< / strong > : < a href = "http://spadin.github.com/js-beautify-safari-extension" > Safari extension< / a > by Sandro Padin,< / li >
< li > < strong > Opera< / strong > : < a href = "https://addons.opera.com/addons/extensions/details/readable-javascript/" > Readable Javascript< / a > (< a href = "https://github.com/Dither/readable-javascript" > github< / a > ) by Dither,< / li >
2011-05-11 23:28:42 +00:00
< li > < strong > Opera< / strong > : < a href = "https://addons.opera.com/addons/extensions/details/source/" > Source< / a > extension by Deathamns,< / li >
2011-05-02 13:16:34 +00:00
< li > < a style = "font-weight: bold" href = "http://fiddler2.com/" > Fiddler< / a > proxy: < a href = "http://fiddler2.com/Fiddler2/extensions.asp" > Javascript Formatter addon< / a > ,
< li > < strong > gEdit< / strong > < a href = "http://github.com/nagaozen/gedit-tunnings/" > tips by Fabio Nagao< / a > ,< / li >
2011-05-05 20:32:46 +00:00
< li > < strong > Akelpad< / strong > < a href = "http://akelpad.sourceforge.net/forum/viewtopic.php?p=11246#11246" > extension< / a > by Infocatcher,< / li >
2011-06-13 20:27:03 +00:00
< li > Beautifier in < a style = "font-weight: bold" href = "http://sethmason.com/2011/04/28/jsbeautify-in-emacs.html" > Emacs< / a > write-up by Seth Mason,< / li >
2011-07-26 14:45:32 +00:00
< li > < a style = "font-weight:bold" href = "http://c9.io" > Cloud9< / a > , a lovely IDE running in a browser, working in the node/cloud, uses jsbeautifier (< a href = "https://github.com/ajaxorg/cloud9" > github< / a > ),< / li >
2011-06-27 19:28:46 +00:00
< li > < a style = "font-weight:bold" href = "http://www.symetronapps.com/shrinker.html" > Shrinker< / a > , a non-free javascript packer for Mac. I haven't used it, so I have no idea if it's any good.< / li >
2011-05-02 13:16:34 +00:00
< li class = "writeme" > Doing anything interesting? Write me to einar@jsbeautifier.org and I'll include your link.< / li >
< / ul >
2010-12-06 19:03:09 +00:00
2009-05-15 23:46:54 +00:00
< div id = "footer" >
2011-05-02 13:16:34 +00:00
< p class = "me-me-me" > Written by Einar Lielmanis, < a href = "mailto:einar@jsbeautifier.org" > einar@jsbeautifier.org< / a > < / p >
2011-07-27 13:51:56 +00:00
< p class = "contributors" > with a great help of < a href = "http://jason.diamond.name/weblog/" > Jason Diamond< / a > , Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, < a href = "http://my.opera.com/Vital/blog/" > Vital Batmanov,< / a > Ron Baldwin, Gabriel Harrison, < a href = "http://shullian.com" > Chris J. Shull< / a > , < a href = "http://mathiasbynens.be/" > Mathias Bynens< / a > and others.
2011-05-02 13:16:34 +00:00
< / p >
< p style = "text-align:right" >
< a href = "#" style = "color: #ccc; border-bottom: 1px dashed #ccc; text-decoration: none;" onclick = "run_tests(); return false;" > Run the tests< / a >
< / p >
2009-05-15 23:46:54 +00:00
< pre id = "testresults" > < / pre >
< / div >
2011-05-02 13:16:34 +00:00
< / div >
< div id = "beauty" >
< button id = "submit" > < strong > Beautify javascript< / strong > < em > (ctrl-enter)< / em > < / button >
< fieldset id = "textarea-wrap" >
< textarea id = "source" > < / textarea >
2011-05-02 13:46:14 +00:00
< / fieldset >
< / div >
2011-05-02 13:34:37 +00:00
< p id = "ie6-go-away" style = "display:none" > IE6. You must be kidding me.< / p >
2011-05-04 10:51:29 +00:00
< script src = "http://www.google-analytics.com/ga.js" type = "text/javascript" > < / script >
< script type = "text/javascript" >
if (window._gat) {
var tracker = _gat._getTracker("UA-7409939-1");
if (tracker & & tracker._trackPageview) {
tracker._trackPageview();
}
}
< / script >
2009-05-15 23:46:54 +00:00
< / body >
< / html >
2011-05-02 13:16:34 +00:00
