<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
// noprotect
function reverse(s) {
for (var i = s.length - 1, o = ''; i >= 0; o += s[i--]) { }
return o;
}
var s = '<div><pre style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;font-size:1em;line-height:1.2em;margin:1.2em 0px"><code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:pre-wrap;border:1px solid rgb(234,234,234);border-radius:3px;display:inline;background-color:rgb(248,248,248);white-space:pre-wrap;overflow:auto;border-radius:3px;border:1px solid rgb(204,204,204);padding:0.5em 0.7em;display:block!important;display:block;overflow-x:auto;padding:0.5em;color:rgb(51,51,51);background:rgb(248,248,248)"><span><span style="color:rgb(51,51,51);font-weight:bold">function</span> <span style="color:rgb(153,0,0);font-weight:bold">syntaxHighlighting</span><span>()</span> </span>{\n <span style="color:rgb(51,51,51);font-weight:bold">var</span> n = <span style="color:rgb(0,128,128)">33</span>;\n <span style="color:rgb(51,51,51);font-weight:bold">var</span> s = <span style="color:rgb(221,17,68)">"hello, こんにちは"</span>;\n <span style="color:rgb(0,134,179)">console</span>.log(s);\n}\n</code></pre>\n<ul style="margin:1.2em 0px;padding-lfet:2em">\n<li style="margin:0.5em 0px">plain</li>\n<li style="margin:0.5em 0px"><em>emphasis</em><ul style="margin:1.2em 0px;padding-left:2em;margin:0px;padding-left:1em">\n<li style="margin:0.5em 0px"><strong>strong emphasis</strong><ul style="margin:1.2em 0px;padding-left:2em;margin:0px;padding-left:1em">\n<li style="margin:0.5em 0px"><del>strikethrough</del></li>\n</ul>\n</li>\n</ul>\n</li>\n<li style="margin:0.5em 0px"><code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:pre-wrap;border:1px solid rgb(234,234,234);border-radius:3px;display:inline;background-color:rgb(248,248,248)">inline code</code></li>\n</ul>\n<ol style="margin:1.2em 0px;padding-left:2em">\n<li style="margin:0.5em 0px">Numbered list<ol style="margin:1.2em 0px;padding-left:2em;margin:0px;padding-left:1em;list-style-type:lower-roman">\n<li style="margin:0.5em 0px">Numbered sub-list<ol style="margin:1.2em 0px;padding-left:2em;margin:0px;padding-left:1em;list-style-type:lower-roman;list-style-type:lower-alpha">\n<li style="margin:0.5em 0px">Numbered sub-sub-list</li>\n</ol>\n</li>\n</ol>\n</li>\n<li style="margin:0.5em 0px"><a href="https://www.google.com" target="_blank">Link</a></li>\n</ol>\n<p style="margin:0px 0px 1.2em!important">An image: <img src="https://ci6.googleusercontent.com/proxy/SnqZGOlvv1rmqrH0D3Hv3b_xgSYDF1X85eF5yiLlq7JA460-RO1EUXU3m6je9Clj3CIVzrbcfE0mNObMdllDlTyOUEWMXBY7pgk=s0-d-e1-ft#http://adam-p.github.io/markdown-here/img/icon24.png" alt="Markdown Here logo" class="CToWUd"> </p>\n<blockquote style="margin:1.2em 0px;border-left-width:4px;border-left-style:solid;border-left-color:rgb(221,221,221);padding:0px 1em;color:rgb(119,119,119);quotes:none">\n<p style="margin:0px 0px 1.2em!important">Block quote.<br><em>With</em> <strong>some</strong> <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:pre-wrap;border:1px solid rgb(234,234,234);border-radius:3px;display:inline;background-color:rgb(248,248,248)">markdown</code>.</p>\n</blockquote>\n<p style="margin:0px 0px 1.2em!important">If <strong>TeX Math</strong> support is enabled, this is the quadratic equation:<br><img src="https://ci6.googleusercontent.com/proxy/Sp3KOkAUXBpjcStpC8T3Jdqb7b8SSr1BfD2cAfBIfujneu6qK8KOq5ul5JDzCWrvUGbkcbMErHPvZbekk91jruwtGojKwnXRMwbpWqaW9XNn9YUjdl64c4P9yBIPU2uc-YfaDe8MxJDAPqX-pQVv7ycg1CELz3RzsHN-Uw=s0-d-e1-ft#https://chart.googleapis.com/chart?cht=tx&chl=-b%20%5Cpm%20%5Csqrt%7Bb%5E2%20-%204ac%7D%20%5Cover%202a" alt="-b \pm \sqrt{b^2 - 4ac} \over 2a" class="CToWUd"></p>\n<h1 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1.6em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(221,221,221)"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-1"></a>Header 1</h1>\n<h2 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1.4em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238)"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-2"></a>Header 2</h2>\n<h3 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1.3em"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-3"></a>Header 3</h3>\n<h4 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1.2em"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-4"></a>Header 4</h4>\n<h5 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1em"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-5"></a>Header 5</h5>\n<h6 style="margin:1.3em 0px 1em;padding:0px;font-weight:bold;font-size:1em;color:rgb(119,119,119)"><a href="#14f1a36fb61d8846_" name="14f1a36fb61d8846_header-6"></a>Header 6</h6>\n<table style="margin:1.2em 0px;padding:0px;border-collapse:collapse;border-spacing:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;border:0px">\n<thead>\n<tr style="border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(204,204,204);margin:0px;padding:0px;background-color:white">\n<th style="font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em;font-weight:bold;background-color:rgb(240,240,240)">Tables</th>\n<th style="text-align:center;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em;font-weight:bold;background-color:rgb(240,240,240)">Are</th>\n<th style="text-align:right;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em;font-weight:bold;background-color:rgb(240,240,240)">Cool</th>\n</tr>\n</thead>\n<tbody style="margin:0px;padding:0px;border:0px">\n<tr style="border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(204,204,204);margin:0px;padding:0px;background-color:white">\n<td style="font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">column 3 is</td>\n<td style="text-align:center;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">right-aligned</td>\n<td style="text-align:right;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">$1600</td>\n</tr>\n<tr style="border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(204,204,204);margin:0px;padding:0px;background-color:white;background-color:rgb(248,248,248)">\n<td style="font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">column 2 is</td>\n<td style="text-align:center;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">centered</td>\n<td style="text-align:right;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">$12</td>\n</tr>\n<tr style="border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(204,204,204);margin:0px;padding:0px;background-color:white">\n<td style="font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">zebra stripes</td>\n<td style="text-align:center;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">are neat</td>\n<td style="text-align:right;font-size:1em;border:1px solid rgb(204,204,204);margin:0px;padding:0.5em 1em">$1</td>\n</tr>\n</tbody>\n</table>\n<p style="margin:0px 0px 1.2em!important">Here’s a horizontal rule:</p>\n<hr>\n<pre style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;font-size:1em;line-height:1.2em;margin:1.2em 0px"><code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:pre-wrap;border:1px solid rgb(234,234,234);border-radius:3px;display:inline;background-color:rgb(248,248,248);white-space:pre-wrap;overflow:auto;border-radius:3px;border:1px solid rgb(204,204,204);padding:0.5em 0.7em;display:block!important">code block\nwith no highlighting\n</code></pre><div title="MDH:PGRpdj5gYGBqYXZhc2NyaXB0PC9kaXY+PGRpdj5mdW5jdGlvbiBzeW50YXhIaWdobGlnaHRpbmco\nKSB7PC9kaXY+PGRpdj4mbmJzcDsgdmFyIG4gPSAzMzs8L2Rpdj48ZGl2PiZuYnNwOyB2YXIgcyA9\nICJoZWxsbywg44GT44KT44Gr44Gh44GvIjs8L2Rpdj48ZGl2PiZuYnNwOyBjb25zb2xlLmxvZyhz\nKTs8L2Rpdj48ZGl2Pn08L2Rpdj48ZGl2PmBgYDwvZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+KiBw\nbGFpbjwvZGl2PjxkaXY+KiAqZW1waGFzaXMqPC9kaXY+PGRpdj4mbmJzcDsgKiAqKnN0cm9uZyBl\nbXBoYXNpcyoqPC9kaXY+PGRpdj4mbmJzcDsgJm5ic3A7ICogfn5zdHJpa2V0aHJvdWdofn48L2Rp\ndj48ZGl2PiogYGlubGluZSBjb2RlYDwvZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+MS4gTnVtYmVy\nZWQgbGlzdDwvZGl2PjxkaXY+Jm5ic3A7ICZuYnNwOzEuIE51bWJlcmVkIHN1Yi1saXN0PC9kaXY+\nPGRpdj4mbmJzcDsgJm5ic3A7ICZuYnNwOyAxLiBOdW1iZXJlZCBzdWItc3ViLWxpc3Q8L2Rpdj48\nZGl2PjIuIFtMaW5rXShodHRwczovL3d3dy5nb29nbGUuY29tKTwvZGl2PjxkaXY+PGJyPjwvZGl2\nPjxkaXY+PGJyPjwvZGl2PjxkaXY+QW4gaW1hZ2U6ICFbTWFya2Rvd24gSGVyZSBsb2dvXShodHRw\nOi8vYWRhbS1wLmdpdGh1Yi5pby9tYXJrZG93bi1oZXJlL2ltZy9pY29uMjQucG5nKSZuYnNwOzwv\nZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+Jmd0OyBCbG9jayBxdW90ZS4gJm5ic3A7PC9kaXY+PGRp\ndj4mZ3Q7ICpXaXRoKiAqKnNvbWUqKiBgbWFya2Rvd25gLjwvZGl2PjxkaXY+PGJyPjwvZGl2Pjxk\naXY+SWYgKipUZVggTWF0aCoqIHN1cHBvcnQgaXMgZW5hYmxlZCwgdGhpcyBpcyB0aGUgcXVhZHJh\ndGljIGVxdWF0aW9uOiZuYnNwOzwvZGl2PjxkaXY+JC1iIFxwbSBcc3FydHtiXjIgLSA0YWN9IFxv\ndmVyIDJhJDwvZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+IyBIZWFkZXIgMTwvZGl2PjxkaXY+IyMg\nSGVhZGVyIDI8L2Rpdj48ZGl2PiMjIyBIZWFkZXIgMzwvZGl2PjxkaXY+IyMjIyBIZWFkZXIgNDwv\nZGl2PjxkaXY+IyMjIyMgSGVhZGVyIDU8L2Rpdj48ZGl2PiMjIyMjIyBIZWFkZXIgNjwvZGl2Pjxk\naXY+Jm5ic3A7Jm5ic3A7PC9kaXY+PGRpdj58IFRhYmxlcyB8IEFyZSB8IENvb2wgfDwvZGl2Pjxk\naXY+fCAtLS0tLS0tLS0tLS0tIHw6LS0tLS0tLS0tLS0tLTp8IC0tLS0tOnw8L2Rpdj48ZGl2Pnwg\nY29sdW1uIDMgaXMgfCByaWdodC1hbGlnbmVkIHwgJDE2MDAgfDwvZGl2PjxkaXY+fCBjb2x1bW4g\nMiBpcyB8IGNlbnRlcmVkIHwgJDEyIHw8L2Rpdj48ZGl2PnwgemVicmEgc3RyaXBlcyB8IGFyZSBu\nZWF0IHwgJDEgfDwvZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+SGVyZSdzIGEgaG9yaXpvbnRhbCBy\ndWxlOjwvZGl2PjxkaXY+PGJyPjwvZGl2PjxkaXY+LS0tPC9kaXY+PGRpdj48YnI+PC9kaXY+PGRp\ndj5gYGA8L2Rpdj48ZGl2PmNvZGUgYmxvY2s8L2Rpdj48ZGl2PndpdGggbm8gaGlnaGxpZ2h0aW5n\nPC9kaXY+PGRpdj5gYGA8L2Rpdj48ZGl2Pjxicj48L2Rpdj4=" style="min-height:0;width:0;max-height:0;max-width:0;overflow:hidden;font-size:0em;padding:0;margin:0"></div></div>x';
var x = s.repeat(100);
var d1 = new Date();
console.log(x.match(/([^>]+)$/)[1]);
console.log('original (bad)', new Date().getTime() - d1.getTime());
var re = new RegExp('([^>]+)$');
d1 = new Date();
console.log(x.match(/([^>]+)$/)[1]);
console.log('original precompiled', new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/>([^>]+)$/)[1]);
console.log('> before', new Date().getTime() - d1.getTime());
d1 = new Date();
var rx = reverse(x);
console.log(rx.match(/^([^>]+)/)[1]);
console.log('reverse', new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/((?:(?!>)[\s\S])+)$/)[1]);
console.log('from RegexMagic', new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/.+>([^>]+)$/)[1]);
console.log("georg's", new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/[\s\S]+>([^>]+)$/)[1]);
console.log("georg's with [\\s\\S]", new Date().getTime() - d1.getTime());
// Doesn't match successfully due to newlines
//d1 = new Date();
//console.log(x.match(/^.+>([^>]+)$/)[1]);
//console.log("georg's variation", new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/^[\s\S]+>([^>]+)$/)[1]);
console.log("georg's variation with [\\s\\S]", new Date().getTime() - d1.getTime());
d1 = new Date();
console.log(x.match(/^(?=([\s\S]*>))\1([^>]+)$/)[2]);
console.log("georg's variation with using atomic group", new Date().getTime() - d1.getTime());
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |