Skip to content
Browse files

Add URL encoder/decoder

  • Loading branch information...
1 parent 2360db9 commit 9faaa49a764c265c134807bb05ee8f46c83daa80 @mathiasbynens committed Mar 16, 2014
Showing with 191 additions and 0 deletions.
  1. +5 −0 url/README.md
  2. +87 −0 url/eff.css
  3. +84 −0 url/eff.js
  4. +15 −0 url/index.html
View
5 url/README.md
@@ -0,0 +1,5 @@
+# [URL encoder/decoder](http://mothereff.in/url)
+
+Convert any Unicode string to its URL-encoded form, and the other way around.
+
+Made by [Mathias Bynens](http://mathiasbynens.be/).
View
87 url/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;
+ }
+
+}
View
84 url/eff.js
@@ -0,0 +1,84 @@
+(function(window, document) {
+
+ var textareas = document.getElementsByTagName('textarea');
+ var decoded = textareas[0];
+ var encoded = textareas[1];
+ var permalink = document.getElementById('permalink');
+ // http://mathiasbynens.be/notes/localstorage-pattern
+ var storage = (function() {
+ var uid = new Date;
+ var storage;
+ var result;
+ try {
+ (storage = window.localStorage).setItem(uid, uid);
+ result = storage.getItem(uid) == uid;
+ storage.removeItem(uid);
+ return result && storage;
+ } catch (exception) {}
+ }());
+
+ 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 decode(string) {
+ return decodeURIComponent(string);
+ }
+
+ function update() {
+ var decodedString;
+ var result;
+ if (this == encoded) { // URL-decode the input
+ try {
+ encoded.className = decoded.className = '';
+ result = decode(encoded.value);
+ decoded.value = decodedString = result;
+ } catch (exception) {
+ decoded.value = 'ERROR: invalid input';
+ encoded.className = decoded.className = 'invalid';
+ decodedString = '';
+ }
+ } else { // URL-encode the input
+ encoded.className = decoded.className = '';
+ decodedString = decoded.value;
+ result = encode(decodedString);
+ encoded.value = result;
+ }
+ permalink.hash = encode(decodedString);
+ storage && (storage.urlEncoded = decodedString);
+ };
+
+ // 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.urlEncoded && (decoded.value = storage.urlEncoded);
+ 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);
+ var s = d.getElementsByTagName(t)[0];
+ g.src = '//www.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+}(document, 'script'));
View
15 url/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset=utf-8>
+<title>URL encoder/decoder</title>
+<meta name=viewport content="width=device-width,initial-scale=1">
+<link rel=stylesheet href=eff.css>
+<meta name=description content="An on-the-fly URL encoder/decoder.">
+<h1>URL 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>URL-decoded (<a href=#%3Csvg%2Fonload%3Dalert(1)%3E id=permalink>permalink</a>)</h2>
+<textarea autofocus>&lt;svg/onload=alert(1)></textarea>
+<h2>URL-encoded</h2>
+<textarea>%3Csvg%2Fonload%3Dalert%281%29%3E</textarea>
+<p id=footer>Made by <a href=http://mathiasbynens.be/>@mathias</a> — <a href=https://github.com/mathiasbynens/mothereff.in/tree/master/url>fork this on GitHub!</a></p>
+<script src=eff.js></script>

0 comments on commit 9faaa49

Please sign in to comment.
Something went wrong with that request. Please try again.