Decode form text from meme URLs

jacebrowning · Apr 1, 2016 · d5399f4 · d5399f4
1 parent 4994b3d
commit d5399f4
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/memegen/templates/index.html b/memegen/templates/index.html
@@ -136,7 +136,7 @@ <h1>Available Templates</h1>
 
     <script type="text/javascript">
 
-      function escapeMemeText(str) {
+      function encodeMemeText(str) {
           return str
             .replace(/-/g, '--')
             .replace(/_/g, '__')
@@ -145,6 +145,14 @@ <h1>Available Templates</h1>
             .replace(/\s+/g, '-') || '_';
         }
 
+      function decodeMemeText(str) {
+          return str
+            .replace(/-/g, ' ')
+            .replace(/_/g, '')
+            .replace(/~q/g, '?')
+            .replace(/~p/g, '%')
+        }
+
       function formatMeme(meme) {
         if (!meme.element) { return meme.text; }
         var source = encodeURI($(meme.element).attr('data-url')).replace(/,/g, '%2C').replace(/'/g, '%27');
@@ -156,8 +164,8 @@ <h1>Available Templates</h1>
 
       function generateMeme() {
         var memeId = $('.js-meme-selector').val();
-        var memeTextTop = escapeMemeText($('#meme-text-top').val());
-        var memeTextBottom = escapeMemeText($('#meme-text-bottom').val());
+        var memeTextTop = encodeMemeText($('#meme-text-top').val());
+        var memeTextBottom = encodeMemeText($('#meme-text-bottom').val());
         if (memeId && memeTextTop && memeTextBottom) {
           var url = '/' + memeId + '/' + memeTextTop + '/' + memeTextBottom;
           $("#meme-link").attr('href', url);
@@ -176,8 +184,8 @@ <h1>Available Templates</h1>
         var link = $( ".js-meme-selector option:checked").data('link');
         if (link) {
           var pieces = link.split('/');
-          $('#meme-text-top').val(pieces[1]);
-          $('#meme-text-bottom').val(pieces[2])
+          $('#meme-text-top').val(decodeMemeText(pieces[2]));
+          $('#meme-text-bottom').val(decodeMemeText(pieces[3]));
         }
         generateMeme();
       });