URL Encode/Decode Webapp with jQuery

Most developers will know of URL encoding as UTF-8 encoding. This converts non-ASCII characters into a syntax of %NN where N stands for a unique numeric format. For example, an empty space converts to %20 when encoded. Nobody wants to do this by hand so developers have made encoding tools for convenience.

This is all possible with backend code and there are even free webapps that do this kinda stuff. But JS is so much easier because it can run without a page refresh and it runs multiple times on the same page.

In this tutorial I’ll explain how you can build a smooth URL encode/decode app without reliance on any backend technology. The app will operate like an Ajax tool but won’t need any server to make the translation.

Check out my live demo to see it in action.

url encoding decoding webapp preview

Live DemoDownload Source Code

Building the Page

Since this is rather simple we don’t need a lot to get started. A plain index.html file is enough for the webapp along with a styles.css stylesheet. I’m using Normalize for simplicity’s sake but you could use your own browser resets or even just work with browser defaults.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
	<title>URL Encode/Decode JS Demo</title>
  <link rel="shortcut icon" href="http://www.vandelaydesign.com/wp-content/themes/vd/assets/graphics/favicon.png">
  <link rel="icon" href="http://www.vandelaydesign.com/wp-content/themes/vd/assets/graphics/favicon.png">
  <link rel="stylesheet" type="text/css" media="all" href="normalize.css">
	<link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

The app itself relies on two textareas and two buttons. The first textarea takes a string, most notably a URL but it could be literally any string.

Once a user adds something into the top textarea they can click either “encode” or “decode”. These two buttons run two distinct methods on the text which then gets placed as output content into the 2nd textarea.

Simple right?

  <div class="wrap">
    <h3>Enter a URL:</h3>
    <textarea id="url" placeholder="http://"></textarea>
    
    <div class="buttons">
      <a href="#" class="encode">Encode</a>
      <a href="#" class="decode">Decode</a>
    </div><!-- @end .buttons -->
    
    <h3>Output:</h3>
    <textarea id="output"></textarea>
  </div><!-- @end .wrap -->

Content Styles

Before we get into the JS code let’s take a quick look over the stylesheet.

Since Normalize handles resets and typography I don’t have much in the way of custom styling. I am using Montserrat as the header font hosted directly from Google Fonts.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

h1 { 
  font-family: 'Montserrat', Helvetica, sans-serif; 
  font-weight: bold; 
  font-size: 2.35em;
  line-height: 1.4em;
  color: #797979; 
  margin-bottom: 35px;
  text-align: center;
}

h3 {
  font-family: 'Montserrat', Helvetica, sans-serif; 
  font-weight: bold; 
  font-size: 1.1em;
  line-height: 1.1em;
  color: #666; 
  margin-bottom: 3px;
  text-transform: uppercase;
}

/** page structure **/
header {
  display: block;
  width: 100%;
  background: #343434;
}
header h1 { padding: 35px 0; margin-top: 0; }

.wrap { display: block; max-width: 700px; padding: 0 10px; margin: 0 auto; text-align: center; }

Also I’m wrapping the entire page in a container with the class .wrap. This centers everything to a maximum of 700px. Since there’s not a whole lot of content this keeps everything centralized and easy to work with.

Next I have custom styles for the two textareas and buttons. Each textarea input uses 80% width so it reacts to a responsive browser window. I’m also using margin: 0 auto to center everything relative to the actual browser width.

#url { 
  display: block;
  margin: 0 auto;
  width: 80%;
  height: 70px;
  padding: 8px 5px;
  border: 1px solid #ccc;
  color: #666;
  font-size: 0.75em;
  margin-bottom: 25px;
  outline: none;
}
#output { 
  display: block;
  margin: 0 auto;
  width: 80%; 
  height: 70px; 
  outline: none; 
  color: #666; 
  font-size: 1em; 
  padding: 3px 2px;
  border: 1px solid #ccc;
}

.buttons {
  display: block;
  margin-bottom: 45px;
}
.buttons a {
  display: inline-block;
  padding: 10px 15px;
  background: #42a5f5;
  color: #e1f1fd;
  text-decoration: none;
}
.buttons a:hover {
  background: #52acf4;
}
.buttons a:active {
  background: #1e88e5;
  color: #bbdefb;
}

.buttons a.encode { margin-right: 15px; }

Each button can be targeted using .buttons a for a CSS selector. The buttons do have their own unique classes but those are used in JavaScript.

I’m using inline-block to keep the buttons aligned together but extra margins & padding for space. Flat hover & active styles give more definition to the buttons so they insist upon user interaction.

Encoding & Decoding with JS

If you know some rudimentary jQuery fundamentals you should be able to understand this script.

I’m using jQuery’s .on() method to attach the click event handler to both buttons. Whenever a user clicks either one it runs this function to encode or decode the string passed from the text box.

$(function(){
  $('.buttons a').on('click', function(e){
    e.preventDefault();
    var action = $(this).attr('class');
    var url = $('#url').val();
    
    if(!url || 0 === url.length) {
      return;
    }

Once a link is clicked we first run e.preventDefault(). This stops the link’s HREF behavior from loading which stops potentially wonky browser behavior.

Next I’m grabbing the necessary action from the link’s class. I’m doing this with jQuery’s .attr() method which pulls the link class name(either “encode” or “decode”).

The only other variable we need is the string passed into the text area which I’m calling url. We get this with another jQuery method .val().

You’ll recognize a small logic statement which checks if the string is empty or nonexistent. This is just a basic check and it’s not even necessary for this instance, but good to have nonetheless.

    if(action == 'encode') { 
      var output = encodeURIComponent(url);
    }
    else {
      var output = decodeURIComponent(url);
    }
    
    $('#output').val(output);
  });
  $('#output').on('click', function(e){
    $(this).select();
  });
});

This last block of code should be easy to understand if you can follow the previous snippet.

There are two native methods in JavaScript named encodeURIComponent() and decodeURIComponent(). These are built into JavaScript by default and they naturally encode or decode a string.

I’m checking which button was pressed and running the appropriate function. Then the resultant value is placed into the output textarea.

Notice one last block of code at the very bottom targeting this output text box. Whenever a user clicks to focus on the box I’m running the .select() method. This automatically selects all text within the box making it easier to copy.

url encoding decoding webapp preview

Live DemoDownload Source Code

Closing

The process of encoding & decoding URLs is commonplace when developing websites. But there are other reasons you might need to do this like when passing data into a database, or when trying to direct download a URL-encoded file.

I hope this webapp can be of use to people looking for a simple encoding or decoding tool. Also be sure to download a copy of my code to see what else you can build.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.