2010-12-06 19:03:09 +00:00
<!DOCTYPE html>
2009-05-15 23:46:54 +00:00
<!--
2010-03-15 23:24:38 +00:00
(c) 2006-2010: Einar Lielmanis, einars@jsbeautifier.org
2009-05-15 23:46:54 +00:00
-->
2010-12-06 19:03:09 +00:00
< html >
2009-05-15 23:46:54 +00:00
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > Online javascript beautifier< / title >
< script type = "text/javascript" >
function add_onload_function(fn)
{
var oe=window.onload;
window.onload = function() { if (oe) oe(); fn(); }
}
add_onload_function(function() {
2009-08-18 01:07:18 +00:00
var tabsize = get_var('tabsize');
2010-03-19 16:20:46 +00:00
var braces_on_own_line = get_var('braces');
2010-03-01 21:51:33 +00:00
var c;
2009-08-18 01:07:18 +00:00
if (tabsize) {
document.getElementById('tabsize').value = tabsize;
}
2010-03-19 16:20:46 +00:00
if (braces_on_own_line) {
document.getElementById('braces-on-own-line').checked = 'checked';
}
2009-08-18 01:07:18 +00:00
2010-03-01 21:51:33 +00:00
if (get_var('test')) {
run_tests();
} else {
c = document.forms[0].content;
c & & c.setSelectionRange & & c.setSelectionRange(0, 0);
c & & c.focus & & c.focus();
}
2009-08-18 01:07:18 +00:00
2009-05-15 23:46:54 +00:00
});
function trim_leading_comments(str)
{
// very basic. doesn't support /* ... */
str = str.replace(/^(\s*\/\/[^\n]*\n)+/, '');
str = str.replace(/^\s+/, '');
return str;
}
function unpacker_filter(source)
{
if (document.getElementById('detect-packers').checked) {
2009-10-22 06:18:14 +00:00
var stripped_source = trim_leading_comments(source);
2009-12-16 01:36:50 +00:00
var unpacked = '';
if (P_A_C_K_E_R.detect(stripped_source)) {
unpacked = P_A_C_K_E_R.unpack(stripped_source);
if (unpacked !== stripped_source) {
return unpacker_filter(unpacked);
}
}
if (EscapedBookmarklet.detect(source)) {
unpacked = EscapedBookmarklet.unpack(source);
if (unpacked !== stripped_source) {
return unpacker_filter(unpacked);
}
}
2009-10-22 06:18:14 +00:00
2009-12-16 01:36:50 +00:00
if (JavascriptObfuscator.detect(stripped_source)) {
unpacked = JavascriptObfuscator.unpack(stripped_source);
if (unpacked !== stripped_source) {
return unpacker_filter(unpacked);
2009-05-15 23:46:54 +00:00
}
2009-12-16 01:36:50 +00:00
}
2009-05-15 23:46:54 +00:00
}
return source;
}
function do_js_beautify()
{
document.getElementById('beautify').disabled = true;
var js_source = document.getElementById('content').value.replace(/^\s+/, '');
var indent_size = document.getElementById('tabsize').value;
var indent_char = ' ';
var preserve_newlines = document.getElementById('preserve-newlines').checked;
2009-12-02 01:40:38 +00:00
var keep_array_indentation = document.getElementById('keep-array-indentation').checked;
2010-03-19 16:20:46 +00:00
var braces_on_own_line = document.getElementById('braces-on-own-line').checked;
2009-05-15 23:46:54 +00:00
if (indent_size == 1) {
indent_char = '\t';
}
if (js_source & & js_source[0] === '< ' & & js_source.substring(0, 4) !== '<!-- ') {
document.getElementById('content').value = style_html(js_source, indent_size, indent_char, 80);
} else {
document.getElementById('content').value =
2009-12-02 01:40:38 +00:00
js_beautify(unpacker_filter(js_source), {
indent_size: indent_size,
indent_char: indent_char,
preserve_newlines:preserve_newlines,
2010-03-19 16:20:46 +00:00
braces_on_own_line: braces_on_own_line,
2009-12-02 01:40:38 +00:00
keep_array_indentation:keep_array_indentation,
space_after_anon_function:true});
2009-05-15 23:46:54 +00:00
}
document.getElementById('beautify').disabled = false;
return false;
}
2009-08-18 01:07:18 +00:00
function get_var( name )
{
var res = new RegExp( "[\\?& ]" + name + "=([^& #]*)" ).exec( window.location.href );
return res ? res[1] : "";
}
2009-10-22 06:18:14 +00:00
function run_tests()
{
var st = new SanityTest();
run_beautifier_tests(st);
JavascriptObfuscator.run_tests(st);
2009-12-16 01:36:50 +00:00
P_A_C_K_E_R.run_tests(st);
EscapedBookmarklet.run_tests(st);
2010-03-01 21:51:33 +00:00
document.getElementById('testresults').style.display='block';
document.getElementById('testresults').innerHTML=st.results();
2009-10-22 06:18:14 +00:00
}
2009-05-15 23:46:54 +00:00
< / script >
< script type = "text/javascript" src = "beautify.js" > < / script >
2010-03-15 23:24:38 +00:00
< 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/bookmarklet_unpacker.js" > < / script >
< script type = "text/javascript" src = "unpackers/p_a_c_k_e_r_unpacker.js" > < / script >
2009-05-15 23:46:54 +00:00
< style type = "text/css" >
/* I guess I need a CSS beautifer as well */
2010-12-06 19:03:09 +00:00
* {
2009-12-02 01:40:38 +00:00
margin: 0;
padding: 0;
}
2010-12-11 07:36:34 +00:00
img {
border: 0;
}
2009-12-02 01:40:38 +00:00
div#wrap {
padding: 0 15px;
}
2010-12-06 19:03:09 +00:00
textarea {
width: 100%;
2011-03-22 10:54:21 +00:00
height: 320px;
2009-12-02 01:40:38 +00:00
border: 0;
2009-05-15 23:46:54 +00:00
}
2010-12-06 19:03:09 +00:00
h1 {
font-family: "trebuchet ms", arial, sans-serif;
font-weight: normal;
2009-05-15 23:46:54 +00:00
font-size: 28px;
2010-12-06 19:03:09 +00:00
color: #666;
margin: 10px 10px 5px 0px;
2009-05-15 23:46:54 +00:00
}
a {
color: #36d;
}
2010-12-06 19:03:09 +00:00
select {
2009-12-02 01:40:38 +00:00
width: 190px;
2009-05-15 23:46:54 +00:00
}
2010-12-06 19:03:09 +00:00
button {
width: 100%;
2009-12-02 01:40:38 +00:00
padding: 3px 5px;
2009-05-15 23:46:54 +00:00
cursor: pointer;
2009-12-02 01:40:38 +00:00
bordeR: 1px solid #ccc;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
margin-top: 2px;
background-color: #eee;
2009-05-15 23:46:54 +00:00
}
2010-02-06 00:30:49 +00:00
body {
2010-12-06 19:03:09 +00:00
font: 14px "myriad web", verdana, arial, helvetica, sans-serif;
2010-02-06 00:30:49 +00:00
}
2010-12-06 19:03:09 +00:00
body, label, button, select {
font-family: arial, helvetica, sans-serif;
2011-03-22 10:54:21 +00:00
color: #222;
2009-05-15 23:46:54 +00:00
}
2010-12-06 19:03:09 +00:00
textarea, pre, span.code {
font-size: 12px;
2010-02-06 00:30:49 +00:00
font-family: consolas, Terminus, "lucida console", "courier new", courier, monospace;
2011-03-22 10:54:21 +00:00
color: #333;
2009-05-15 23:46:54 +00:00
}
a#signature {
background: url(http://spicausis.lv/spic-sign-blog.png) no-repeat bottom right;
display:block;
width: 15px;
height: 21px;
position: fixed;
bottom: 0px;
right: 0px;
}
2010-12-06 19:03:09 +00:00
h2, h3 {
color: #333;
font-size: 12px;
margin-top: 12px;
border-bottom: 1px solid #ddd;
margin-bottom: 4px;
font-weight: bold;
2009-05-15 23:46:54 +00:00
}
2010-12-06 19:03:09 +00:00
h3 {
font-weight: normal;
}
p {
2009-05-15 23:46:54 +00:00
line-height: 150%;
2010-12-06 19:03:09 +00:00
margin: 0 0 8px 0;
2009-05-15 23:46:54 +00:00
}
div#footer {
2010-12-06 19:03:09 +00:00
clear: both;
2009-05-15 23:46:54 +00:00
margin: 20px 0 0 0;
2010-12-06 19:03:09 +00:00
font-size: 11px;
2009-05-15 23:46:54 +00:00
border-top: 1px solid #ddd;
padding-top: 16px;
2009-11-27 02:55:09 +00:00
}
label {
cursor: pointer;
2009-05-15 23:46:54 +00:00
}
2009-12-02 01:40:38 +00:00
fieldset {
border: 0;
padding: 0;
}
fieldset#textarea div {
border: 1px solid #ccc;
padding: 3px;
}
fieldset#options {
width: 200px;
margin-left: 10px;
float: right;
}
fieldset#options h2 {
margin-top: 0;
}
fieldset ul {
list-style: none;
}
fieldset li {
margin-bottom: 6px;
}
fieldset#textarea {
text-align: right;
2010-12-06 19:03:09 +00:00
2009-12-02 01:40:38 +00:00
}
pre {
margin: 10px 0;
}
2009-05-15 23:46:54 +00:00
2010-12-06 19:03:09 +00:00
div.bottom {
margin-right: 200px;
}
div#bottom-left {
float: left;
width: 48%;
font-size: 12px;
}
div#bottom-right {
float: left;
margin-left: 20px;
width: 48%;
font-size: 12px;
}
2010-12-08 09:21:24 +00:00
.FlattrButton {
margin: 0 4px;
}
.FlattrButton img {
border: 0;
}
2009-05-15 23:46:54 +00:00
< / style >
< / head >
< body >
2009-12-02 01:40:38 +00:00
< div id = "wrap" >
2009-11-17 08:41:44 +00:00
< h1 > Javascript unpacker and beautifier< / h1 >
2009-05-15 23:46:54 +00:00
< form method = "post" action = "?" >
2009-12-02 01:40:38 +00:00
< fieldset id = "options" >
< h2 > Options< / h2 >
< 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 >
< option value = "4" selected = "selected" > indent with 4 spaces< / option >
< option value = "8" > indent with 8 spaces< / option >
< / select > < / li >
2010-03-19 16:20:46 +00:00
< li > < input type = "checkbox" id = "braces-on-own-line" / > < label for = "braces-on-own-line" > Braces on own line< / label > < br / > < / li >
2009-12-02 01:40:38 +00:00
< li > < input type = "checkbox" id = "preserve-newlines" checked = "checked" / > < label for = "preserve-newlines" > Preserve empty lines?< / label > < br / > < / li >
< li > < input type = "checkbox" id = "detect-packers" checked = "checked" / > < label for = "detect-packers" > Detect packers?< / label > < br / > < / li >
< li > < input type = "checkbox" id = "keep-array-indentation" / > < label for = "keep-array-indentation" > Keep array indentation?< / label > < / li >
< / ul >
< / fieldset >
< fieldset id = "textarea" >
< div > < textarea rows = "30" cols = "30" name = "content" id = "content" >
2009-05-15 23:46:54 +00:00
/* paste in your code and press Beautify button */
if('this_is'==/an_example/){do_something();}else{var a=b?(c%d):e[f];}
2009-12-02 01:40:38 +00:00
< / textarea > < / div >
2009-05-15 23:46:54 +00:00
< button onclick = "return do_js_beautify()" id = "beautify" > Beautify< / button >
2009-12-02 01:40:38 +00:00
< / fieldset >
2009-05-15 23:46:54 +00:00
< / form >
2010-12-06 19:03:09 +00:00
< div class = "bottom" >
< div id = "bottom-left" >
< p style = "margin-top: 10px; color: #113; border: 1px solid #cce; padding: 5px; background:#f8f8f8" > This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by
2009-11-17 08:41:44 +00:00
the popular < a href = "http://dean.edwards.name/packer/" > Dean Edward's packer,< / a > as well as deobfuscate scripts
processed by javascriptobfuscator.com.< / p >
< p > The source code for the latest version is always available on < a
2009-05-15 23:46:54 +00:00
href="http://github.com/einars/js-beautify">github< / a > , and you can download the beautifier for
local use (< a href = "http://github.com/einars/js-beautify/zipball/master" > zip< / a > , < a href = "http://github.com/einars/js-beautify/tarball/master" > tar.gz< / a > ) as well.< / p >
< h2 > Formatting from command-line< / h2 >
2011-03-22 10:54:21 +00:00
< p > A stand-alone python version of the beautifier is being made as you read this. < em > I should really sit down and finish this.< / em > < / p >
2010-12-20 16:17:46 +00:00
< p > Until then, you can use provided beautify-cl.js script, using < a href = "http://www.mozilla.org/rhino/" > Rhino javascript engine< / a > , use < a href = "https://github.com/rhoney/jsBeautifier.net" > .net version< / a > , or take a look around the < a href = "https://github.com/einars/js-beautify/" > github< / a > — there are various wrappers available.< / p >
2010-12-06 19:03:09 +00:00
< h2 > Support< / h2 >
< p > The beautifier is — and always will be — completely free and open, so donating is a wonderful thing to do and it will probably make you feel good and warm inside.
2010-12-31 08:52:36 +00:00
< form style = "float: left; margin-left: 10px" action = "https://www.paypal.com/cgi-bin/webscr" method = "post" >
< input type = "hidden" name = "cmd" value = "_s-xclick" >
< input type = "hidden" name = "hosted_button_id" value = "TL28UJK2ARCUJ" >
< input type = "image" src = "http://spicausis.lv/misc/paypal-donate.gif" border = "0" name = "submit" alt = "PayPal - The safer, easier way to pay online!" >
< img alt = "" src = "https://www.paypal.com/en_US/i/scr/pixel.gif" width = "1" height = "1" >
< / form >
< p style = "float:left; padding-top: 2px; margin-left: 3px; " > < 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 style = "clear:both; height: 1px; overflow:hidden;" > < / div >
2011-03-22 10:54:21 +00:00
< p > If you find some problems with the generated javascript, adapt the script for your favorite editor, or want to say "hi", my email is < a href = "mailto:einar@jsbeautifier.org" > einar@jsbeautifier.org< / a > .< / p >
2010-12-31 08:52:36 +00:00
2010-12-06 19:03:09 +00:00
< / div >
< div id = "bottom-right" >
2011-03-22 10:54:21 +00:00
< h2 > Chrome extension< / h2 >
< p > Tom Rix has made this into an awesome javascript-beautifying Chrome extension. You can read more about it and install it here: < a href = "https://github.com/rixth/jsbeautify-for-chrome" > https://github.com/rixth/jsbeautify-for-chrome< / a >
< h2 > Safari extension< / h2 >
< p > Sandro Padin has written an extension for the Safari browser. Visit its page and download the extension here: < a href = "http://spadin.github.com/js-beautify-safari-extension" > http://spadin.github.com/js-beautify-safari-extension< / a >
2010-12-06 19:03:09 +00:00
< h3 > < a href = "http://fiddler2.com/" > Fiddler< / a > < / h3 >
2009-08-24 09:19:56 +00:00
< p > This popular web debugging proxy for Windows has a < a href = "http://fiddler2.com/Fiddler2/extensions.asp" > Javascript Formatter addon< / a > (based on this beautifier) which can reformat javascript on the fly.< / p >
2010-12-06 19:03:09 +00:00
< h3 > gEdit< / h3 >
2009-12-18 03:24:29 +00:00
< p > Fabio Nagao has written some < a href = "http://github.com/nagaozen/gedit-tunnings/" > tips for the gEdit users,< / a > among them he tells how to integrate the beautifier into the editor.< / p >
2010-12-06 19:03:09 +00:00
< p style = "color: #363" > < i > Are you doing something neat using the beautifier? Tell me about that, and I'll include a link here!< / i > < / p >
2009-09-03 03:08:51 +00:00
< p > If you're writing javascript code, < a href = "http://jslint.com/" > JSLint< / a > is a really fine piece of software, too. You don't have to follow its recommendations blindly, but understanding what it says about your code can greatly improve your skills.< / p >
2010-12-06 19:03:09 +00:00
< / div >
< / div >
2009-05-15 23:46:54 +00:00
< div id = "footer" >
2010-03-01 21:51:33 +00:00
< a href = "#" style = "border-bottom: 1px dashed #36d; text-decoration: none;" onclick = "run_tests(); return false;" > Run the tests< / a >
2009-11-27 02:55:09 +00:00
< br / >
2009-05-15 23:46:54 +00:00
< pre id = "testresults" > < / pre >
2010-03-15 23:32:28 +00:00
Written by < a href = "mailto:einar@jsbeautifier.org" > Einar Lielmanis< / a > , with the 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 and others.
2009-05-15 23:46:54 +00:00
< / div >
< / div >
< a id = "signature" href = "http://spicausis.lv/" > < / a >
< 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 >
< / body >
< / html >
