Skip to content

Commit

Permalink
Add UTF-8 encoder/decoder
Browse files Browse the repository at this point in the history
  • Loading branch information
mathiasbynens committed Jun 21, 2013
1 parent 1a1e458 commit 43e613d
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 0 deletions.
1 change: 1 addition & 0 deletions update.sh
Expand Up @@ -5,3 +5,4 @@ echo "Updating dependencies..."
./lua-minifier/vendor/update.sh
./punycode/vendor/update.sh
./reverse-string/vendor/update.sh
./utf-8/vendor/update.sh
5 changes: 5 additions & 0 deletions utf-8/README.md
@@ -0,0 +1,5 @@
# [UTF-8 encoder/decoder](http://mothereff.in/lua-minifier)

This tool automatically encodes any string you enter. It can also decode valid UTF-8 input. It uses [utf8.js](http://mths.be/utf8js) under the hood.

Made by [Mathias Bynens](http://mathiasbynens.be/).
87 changes: 87 additions & 0 deletions utf-8/eff.css
@@ -0,0 +1,87 @@
html, textarea {
font: 1em/1.6 sans-serif;
}

body {
max-width: 40em;
padding: 0 1em;
}

h1 {
text-align: center;
font-size: 1.3em;
margin: 0 0 .5em;
padding-top: 1em;
}

h2 {
font-size: 1em;
}

a {
color: #333;
text-decoration: none;
border-bottom: 1px solid #aaa;
padding: .1em .2em;
}

a:hover, a:focus {
color: #fff;
border-color: #036;
background: #36c;
}

textarea {
font-family: Monaco, Consolas, monospace;
}

#footer {
margin-top: 2em;
text-align: center;
}

textarea {
border: 3px double green;
background: #90ee90;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 1em 0 .5em;
padding: .7em;
resize: vertical;
min-height: 9.5em;
}

code {
font-family: Monaco, Consolas, monospace;
font-size: .9em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

.invalid, :invalid {
border-color: red;
background: #ffb6c1;
}

@media (min-width: 42em) {

html {
font-size: 1.2em;
background: #c4c4c4;
height: 100%;
}

body {
margin: 0 auto;
padding: 0 2em;
min-height: 100%;
background: #fff;
border: solid #aaa;
border-width: 0 1px;
}

}
96 changes: 96 additions & 0 deletions utf-8/eff.js
@@ -0,0 +1,96 @@
(function(window, document) {

var textareas = document.getElementsByTagName('textarea'),
decoded = textareas[0],
encoded = textareas[1],
permalink = document.getElementById('permalink'),
regexBinaryGroup = /\s*[01]{8}\s*/g,
regexAnyCharacter = /[\s\S]/g,
regexBinary = /^(\s*[01]{8}\s*)*$/,
regexExtendedASCII = /^[\x00-\xff]*$/,
// http://mathiasbynens.be/notes/localstorage-pattern
storage = (function() {
var uid = new Date,
storage,
result;
try {
(storage = window.localStorage).setItem(uid, uid);
result = storage.getItem(uid) == uid;
storage.removeItem(uid);
return result && storage;
} catch(e) {}
}()),
stringFromCharCode = String.fromCharCode;

function encode(string) {
// URL-encode some more characters to avoid issues when using permalink URLs in Markdown
return encodeURIComponent(string).replace(/['()_*]/g, function(character) {
return '%' + character.charCodeAt().toString(16);
});
}

function hexEscape(string) {
var length = string.length;
var index = -1;
var result = '';
var hex;
while (++index < length) {
hex = string.charCodeAt(index).toString(16).toUpperCase();
result += '\\x' + ('00' + hex).slice(-2);
}
return result;
}

function update() {
var shouldDecode = this == encoded;
var value;
if (shouldDecode) {
try {
value = utf8.decode(eval('\'' + encoded.value + '\''));
decoded.value = value;
decoded.className = encoded.className = '';
} catch(e) {
decoded.value = 'ERROR: invalid input';
decoded.className = encoded.className = 'invalid';
}
} else {
value = utf8.encode(decoded.value);
encoded.value = hexEscape(value);
decoded.className = encoded.className = '';
}
value = decoded.value;
permalink.hash = encode(value);
storage && (storage.utf8 = value);
};

// http://mathiasbynens.be/notes/oninput
decoded.onkeyup = encoded.onkeyup = update;
decoded.oninput = encoded.oninput = function() {
decoded.onkeyup = encoded.onkeyup = null;
update.call(this);
};

if (storage) {
storage.utf8 && (decoded.value = storage.utf8);
update();
}

window.onhashchange = function() {
decoded.value = decodeURIComponent(location.hash.slice(1));
update();
};

if (location.hash) {
window.onhashchange();
}

}(this, document));

// Google Analytics
window._gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));
18 changes: 18 additions & 0 deletions utf-8/index.html
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<title>UTF-8 encoder/decoder</title>
<meta name=viewport content="width=device-width">
<link rel=stylesheet href=eff.css>
<meta name=description content="An online, on-the-fly UTF-8 encoder/decoder.">
<h1>UTF-8 encoder/decoder</h1>
<noscript><strong>To use this tool, please <a href=http://enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
<h2>UTF-8-decoded:</h2>
<textarea autofocus>Foo © bar 𝌆 baz ☃ qux</textarea>
<h2>UTF-8-encoded: (<a href=#Foo%20%C2%A9%20bar%20%F0%9D%8C%86%20baz%20%E2%98%83%20qux id=permalink>permalink</a>)</h2>
<textarea>\x46\x6F\x6F\x20\xC2\xA9\x20\x62\x61\x72\x20\xF0\x9D\x8C\x86\x20\x62\x61\x7A\x20\xE2\x98\x83\x20\x71\x75\x78</textarea>
<h2>About this tool</h2>
<p>This tool uses <a href=http://mths.be/utf8js>utf8.js</a> to UTF-8-encode any string you enter in the ‘decoded’ field, or to decode any UTF-8-encoded string you enter in the ‘encoded’ field.
<p id=footer>Made by <a href=http://mathiasbynens.be/>@mathias</a><a href=https://github.com/mathiasbynens/mothereff.in/tree/master/lua-minifier>fork this on GitHub!</a></p>
<script src=vendor/utf8.js></script>
<script src=eff.js></script>

0 comments on commit 43e613d

Please sign in to comment.