mirror of
https://github.com/beautifier/js-beautify.git
synced 2024-11-23 12:49:40 +00:00
378 lines
13 KiB
HTML
378 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
(c) 2006-2010: Einar Lielmanis, einars@jsbeautifier.org
|
|
"End braces on own line" added by Chris J. Shull, chrisjshull@gmail.com
|
|
|
|
-->
|
|
<html>
|
|
<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() {
|
|
|
|
var tabsize = get_var('tabsize');
|
|
var brace_style = get_var('braces');
|
|
var end_braces_on_own_line = get_var('endbraces');
|
|
var c;
|
|
if (tabsize) {
|
|
document.getElementById('tabsize').value = tabsize;
|
|
}
|
|
if (brace_style) {
|
|
if (brace_style===true)
|
|
brace_style = "expand";
|
|
document.getElementById('brace-style').value = brace_style;
|
|
}
|
|
|
|
if (get_var('test')) {
|
|
run_tests();
|
|
} else {
|
|
c = document.forms[0].content;
|
|
c && c.setSelectionRange && c.setSelectionRange(0, 0);
|
|
c && c.focus && c.focus();
|
|
}
|
|
|
|
});
|
|
|
|
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) {
|
|
|
|
var stripped_source = trim_leading_comments(source);
|
|
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);
|
|
}
|
|
}
|
|
|
|
if (JavascriptObfuscator.detect(stripped_source)) {
|
|
unpacked = JavascriptObfuscator.unpack(stripped_source);
|
|
if (unpacked !== stripped_source) {
|
|
return unpacker_filter(unpacked);
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
var keep_array_indentation = document.getElementById('keep-array-indentation').checked;
|
|
var brace_style = document.getElementById('brace-style').value;
|
|
|
|
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, brace_style);
|
|
} else {
|
|
document.getElementById('content').value =
|
|
js_beautify(unpacker_filter(js_source), {
|
|
indent_size: indent_size,
|
|
indent_char: indent_char,
|
|
preserve_newlines:preserve_newlines,
|
|
brace_style: brace_style,
|
|
keep_array_indentation:keep_array_indentation,
|
|
space_after_anon_function:true});
|
|
}
|
|
|
|
document.getElementById('beautify').disabled = false;
|
|
return false;
|
|
}
|
|
|
|
|
|
function get_var( name )
|
|
{
|
|
var res = new RegExp( "[\\?&]" + name + "=([^&#]*)" ).exec( window.location.href );
|
|
return res ? res[1] : "";
|
|
}
|
|
|
|
function run_tests()
|
|
{
|
|
var st = new SanityTest();
|
|
run_beautifier_tests(st);
|
|
JavascriptObfuscator.run_tests(st);
|
|
P_A_C_K_E_R.run_tests(st);
|
|
EscapedBookmarklet.run_tests(st);
|
|
|
|
document.getElementById('testresults').style.display='block';
|
|
document.getElementById('testresults').innerHTML=st.results();
|
|
}
|
|
|
|
</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/bookmarklet_unpacker.js" ></script>
|
|
<script type="text/javascript" src="unpackers/p_a_c_k_e_r_unpacker.js" ></script>
|
|
|
|
<style type="text/css">
|
|
/* I guess I need a CSS beautifer as well */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
img {
|
|
border: 0;
|
|
}
|
|
div#wrap {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 320px;
|
|
border: 0;
|
|
}
|
|
h1 {
|
|
font-family: "trebuchet ms", arial, sans-serif;
|
|
font-weight: normal;
|
|
font-size: 28px;
|
|
color: #666;
|
|
margin: 10px 10px 5px 0px;
|
|
}
|
|
a {
|
|
color: #36d;
|
|
}
|
|
select {
|
|
width: 190px;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 3px 5px;
|
|
cursor: pointer;
|
|
bordeR: 1px solid #ccc;
|
|
border-bottom: 1px solid #999;
|
|
border-right: 1px solid #999;
|
|
margin-top: 2px;
|
|
background-color: #eee;
|
|
}
|
|
body {
|
|
font: 14px "myriad web", verdana, arial, helvetica, sans-serif;
|
|
}
|
|
body, label, button, select {
|
|
font-family: arial, helvetica, sans-serif;
|
|
color: #222;
|
|
}
|
|
textarea, pre, span.code {
|
|
font-size: 12px;
|
|
font-family: consolas, Terminus, "lucida console", "courier new", courier, monospace;
|
|
color: #333;
|
|
}
|
|
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;
|
|
}
|
|
h2, h3 {
|
|
color: #333;
|
|
font-size: 12px;
|
|
margin-top: 12px;
|
|
border-bottom: 1px solid #ddd;
|
|
margin-bottom: 4px;
|
|
font-weight: bold;
|
|
}
|
|
h3 {
|
|
font-weight: normal;
|
|
}
|
|
p {
|
|
line-height: 150%;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
div#footer {
|
|
clear: both;
|
|
margin: 20px 0 0 0;
|
|
font-size: 11px;
|
|
border-top: 1px solid #ddd;
|
|
padding-top: 16px;
|
|
}
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
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;
|
|
|
|
}
|
|
pre {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.FlattrButton {
|
|
margin: 0 4px;
|
|
}
|
|
.FlattrButton img {
|
|
border: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrap">
|
|
<h1>Javascript unpacker and beautifier</h1>
|
|
<form method="post" action="?">
|
|
<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>
|
|
<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>
|
|
<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">
|
|
/* paste in your code and press Beautify button */
|
|
if('this_is'==/an_example/){do_something();}else{var a=b?(c%d):e[f];}
|
|
</textarea></div>
|
|
<button onclick="return do_js_beautify()" id="beautify">Beautify</button>
|
|
</fieldset>
|
|
</form>
|
|
<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
|
|
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
|
|
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>
|
|
<p>For the sake of the glittery unicorns, finally it is here: <a style="color: #c33" href="python/jsbeautifier.py">jsbeautifier.py</a>, enjoy! You can also use it as a library module.</p>
|
|
<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.
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
</div>
|
|
|
|
<div id="bottom-right">
|
|
<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>
|
|
<h2>Opera extension</h2>
|
|
<p>Dither converted this into an addon for Opera called "readable javascript" — you can install it from <a href="https://addons.opera.com/addons/extensions/details/readable-javascript/">addons.opera.com</a>, or visit <a href="https://github.com/Dither/readable-javascript">its github project page</a>.</p>
|
|
<h3><a href="http://fiddler2.com/">Fiddler</a></h3>
|
|
<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>
|
|
<h3>Other editors</h3>
|
|
<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 this editor. Infocatcher wrote <a href="http://akelpad.sourceforge.net/forum/viewtopic.php?p=11246#11246">an extension</a> for <a href="http://akelpad.sourceforge.net/en/index.php">AkelPad</a>, a small text editor for Windows.</p>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<a href="#" style="border-bottom: 1px dashed #36d; text-decoration: none;" onclick="run_tests(); return false;">Run the tests</a>
|
|
<br />
|
|
<pre id="testresults"></pre>
|
|
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, <a href="http://shullian.com">Chris J. Shull</a> and others.
|
|
|
|
</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>
|