In this article, we’ll explore the modern techniques for working with URLs in JavaScript, and answer the how, why and when questions relating to encoding and decoding URLs in JavaScript.

When you type something into a browser, a search result or various search results are provided. These search results come in a confusing format with text and special characters such as %, +,?, =, &, <, >, and so on.

Look at this result from the Frontend Masters ‘courses’ section on the blog page.

See the special characters in the URL on the search bar? They’re referred to as encoded characters.

As a way to familiarize yourself and see how common they are, try searching something in your browser to see the results and identify the encoded characters. For example, try searching ‘What are URLs?’.

Working with URLs in JavaScript

Before getting into encoding and decoding URLs, we need to learn how to work with URLs in JavaScript. This is useful for when you need to construct, parse, and manipulate web addresses. Modern JavaScript provides a built-in URL class, which offers powerful features for working with URLs:

1. Creating a URL object: To work with URLs in JavaScript, you can create a URL object using this URL syntax.

const url = new URL("https://sample.com/search?q=hello world");

2. Accessing URL components: You can access various components of the URL once you have a URL object. You can access components such as the:
   • url.protocol: Returns the protocol of the URL (e.g “https:”)
   • url.hostname: Returns the hostname of the URL (e.g “sample.com”)
   • url.pathname: Returns the path of the URL (e.g “/search”)
   • url.searchParams: Returns a URLSearchParams object containing the query parameters

console.log(url.protocol);     // Output: https:
console.log(url.hostname);     // Output: sample.com
console.log(url.pathname);     // Output: /search
console.log(url.searchParams); // Output: q=hello+world

3. Converting URL object or component to string: You can use the toString() JavaScript method to obtain a URL or in this case, a URL component as a string.

console.log(url.searchParams.toString());
// Output: q=hello+world

4. Getting the current page URL: To get the current URL of a web page you’re currently on, use the window.location.href property.

const currentUrl = window.location.href;
console.log(currentUrl);
// Output: Logs out your current URL

5. Modifying URL components: You can easily modify query parameters of a URL using the searchParams property of the URL object.

url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

This will update the value of the “q” query parameter from “hello world” to “new query” in an encoded format.

6. Constructing new URLs: You can also construct new URLs by combining different components or modifying existing ones.

const newURL = new URL("https://sample.com");
newURL.pathname = "/new-path";
newURL.searchParams.set("q", "new query");
console.log(newURL.toString())
// Output: https://sample.com/new-path?q=new+query

The above lines of code constructs a new URL by first creating a URL object, setting the pathname, and setting the query parameter. It then converts the result to a string for easy reading.

Try running all the code snippets provided above to get an idea of how to work with URLs in JavaScript.

Now that we’ve learned how to work with URLs in JavaScript, we’ll learn how to encode and decode URLs in JavaScript as it is an important skill for web developers to acquire.

Encoding URLs in JavaScript

Encoding a URL essentially means converting special characters in a URL into a format that can be properly transmitted over the internet.

This process is necessary because some characters in URLs, such as spaces or symbols, can have unique meanings, and encoding them ensures that browsers and web servers interpret them correctly.

Now, why do URLs need to be encoded? This is because URLs are limited in the characters they can include by default. The standard URL specification states that URLs can only contain characters from the ASCII character set, which consists of 128 characters. These characters include uppercase and lowercase letters, numbers, and a limited collection of special characters, such as “-“, “_”, “.”, and “~”.

Reserved characters, which have specific meanings in URLs, are not part of the standard ASCII set and must be encoded if used in a URL. The reserved characters are “/”, “[” and “]”, “@”, “%”, “:”, “&”, “#”, “@”, “=”,” and so on.

To include reserved characters in a URL, they must be percent-encoded, which means replacing them with a percent sign (“%”) followed by their hexadecimal value. For example, because URLs cannot contain spaces, the space character (” “) is encoded as “%20” or “+”, and the ampersand (“&”) is encoded as “%26”.

JavaScript provides two functions for encoding URLs: encodeURI() and encodeURIComponent().

The encodeURIComponent() Function

The encodeURIComponent() function encodes a URI component, such as query parameters, in which some characters have special meaning and must be encoded. It encodes all characters except the standard ASCII alphanumeric characters (A-Z, a-z, and 0-9), hyphen (“-“), underscore (“_”), period (“.”), and tilde (“~”).

URI stands for Unique Resource Identifier. A URL is a URI. There is a difference but it’s nothing to fret about.

Take a look at the code snippets below and their results:

const url = "https://frontendmasters.com";
const encodedURL = encodeURIComponent(url);
console.log(encodedURL);
// Output: https%3A%2F%2Ffrontendmasters.com

In this first example, we defined a variable ‘url’ and assigned it a value – ‘https:frontendmasters.com’ (the URL to encode). Next, we call the encodedURIComponent() function, passing the ‘url’ as an argument. The function then encodes the URL by replacing specific characters with their percent-coded representation and logs it to the terminal.

Characters like ‘:’ and ‘/’ have been replaced with their percent-coded representations (%3A and %2F, respectively).

const url2 = "mango & pineapple";
const encodedURL2 = encodeURIComponent(url2);
console.log(encodedURL2);
// Output: mango%20%26%20pineapple 

In example 2, can you see the “%20” and “%26” symbols that represent the space and ampersand (&) characters? The value passed isn’t a URL, but it’s a nice example of how JavaScript encodes spaces and ampersands.

For additional information on the encodeURIComponent() function, see the MDN documentation.

The encodeURI() Function

The encodeURI function is used to encode an entire URI, including the entire URL. It does not encode certain characters that are allowed in a URI, such as letters, digits, hyphens, periods, and underscores.

The characters that are not encoded by encodeURI are the same as those for the encodeURIComponent function, plus several more, namely:

• Question mark (“?”)
• Hash sign (“#”)
• Dollar sign (“$”)
• Ampersand (“&”)
• Comma (“,”)
• Forward slash (“/”)
• Colon (“:”)
• Semi-colon (“;”)
• At sign (“@”)
• Equals sign (“=”)
• Plus sign (“+”)

Let’s look at some code snippets.

const url = 'https://www.twitter.com';
console.log(encodeURI(url)); 
// Output: https://www.twitter.com

The result remains the same as the URL given because the encodeURI() function does not encode some characters such as slash, period, and colon.

If you use the encodeURIComponent() on the same example, you will observe that some characters are encoded. Let’s try it out.

const url = 'https://www.twitter.com';
console.log(encodeURIComponent(url)); 
// Output: https%3A%2F%2Fwww.twitter.com

Now, for a more complex code sample, the value of the URL to be encoded is a query parameter.

const url = "https://sample.com/search?q=hello world";

console.log(encodeURI(url));
// Output: "https://sample.com/search?q=hello%20world"

console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fsample.com%2Fsearch%3Fq%3Dhello%20world

The encodeURI() function simply encodes the space character in the query input as “%20”. On the other hand, the encodeURIComponent() encodes the colon, the slash, and the space character in the query parameter.

For additional information on the encodeURI() function, see the MDN documentation.

The key to understanding the differences between these two functions is to note which characters are encoded and which are not encoded for both functions. While they are slightly different, they both perform the same action – encoding URLs to make them easier to transfer across the internet.

Reasons You’d Need to Encode Your URLs

1. Safety and Accuracy: URLs may contain special characters, such as spaces or query parameters, which web servers or browsers may misinterpret. Encoding URLs ensures that special characters are correctly interpreted, reducing errors and ensuring accurate transmission.
2. Data Integrity: When sending data in URLs, such as search queries or form submissions, encoding ensures that the data is preserved during transmission. Decoding allows the data to be correctly processed and interpreted by the receiver.

Decoding URLs in JavaScript

Decoding is the opposite of encoding. It reverts the effect of encoded URLs.

Decoding a URL entails converting percent-coded characters back to their original form. Decoding is important when you receive an encoded URL and need to extract information from it, similar to solving a puzzle in which you must decode to receive the message.

The decodeURIComponent() Function

In JavaScript, you can decode a URL using the decodeURIComponent() function. When calling this function to decode a URL, it decodes each component of the URI.

const encodedURL = "https%3A%2F%2Fsample.com%2Fsearch%3Fq%3Dhello%20world";
console.log(decodeURIComponent(encodedURL));
// Output: "https://sample.com/search?q=hello world"""

Here, the decodeURIComponent() function takes the encoded URL as input and returns the decoded URL.

This MDN documentation offers more information on this function.

The decodeURI() Function

The decodeURI() function is used to decode the entire URI including domain, path, and query parameters.

const url = "https://sample.com/search?q=hello world";
console.log(encodeURI(url));
// Output: https://sample.com/search?q=hello%20world

console.log(decodeURI(url));
// Output: https://sample.com/search?q=hello world

In the above example, we encode a URL query parameter using the encodeURI() function and decode the encoded URL using the decodeURI() function.

Check out the MDN documentation for further information on the decodeURI() method.

Learning how to encode and decode URLs in JavaScript is one thing; understanding when to encode and decode URLs is another.

When to Encode a URL

Here are some common scenarios when you might need to encode a URL:

1. Generating Dynamic URLs: If your application generates URLs dynamically, like when generating links based on user input or database values, ensure that any user-generated input is properly encoded. This ensures that any special characters in the URLs are converted into a format that can be safely transmitted over the internet.

const dynamicValue = "hello world";
const encodedURL = "https://example.com/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://example.com/search?q=hello%20world"

2. Handling Form Submissions with URL Parameters: When users submit form data (e.g user profiles), the form data is often included in the URL as query parameters. If it contains special characters (such as &, ?, or spaces), you should encode the URL parameters before sending them via GET or POST requests. This prevents unexpected behavior or errors due to invalid characters in the URL and ensures that the data is transmitted safely.

<form action="https://example.com/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>

• The form submits the data to “https://example.com/search” when the submit button is clicked.
• The form data is encoded and sent to the server using the GET method, as it’s the default method for form submission when the action attribute is specified.
• The first input field contains a value of “hello world”. When the form is submitted, this value is encoded and appended to the URL as a query parameter. For example, the encoded URL might look like “https://example.com/search?q=hello%20world”.

3. Sending Data via Ajax Requests: When sending Ajax requests to retrieve data from a server, you often include parameters in the URL. These parameters may contain special characters, so it’s necessary to encode the URL to ensure that your Ajax requests work well and avoids unexpected issues caused by special characters.

const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://sample.com/api/search?q=" + encodedInputWord;

When to Decode a URL

Here are some common scenarios when you might need to decode a URL:

1. Processing URLs received from external sources: External sources (e.g API responses, user input) may provide encoded URLs. Decoding these URLs allows you to extract the original information and ensure that the data is correctly interpreted.

const encodedURL = "https%3A%2F%2Fsample.com%2Fsearch%3Fq%3Dhello%20world";
const decodedURL = decodeURIComponent(encodedURL);
console.log(decodedURL); // Output: "https://sample.com/search?q=hello world"

2. Displaying URLs in user interfaces: When displaying URLs in your application’s user interface, make sure they are in their original, human-readable format. Decoding the URLs ensures that they are displayed correctly to the user.

const encodedURL = "https%3A%2F%2Fsample.com%2Fsearch%3Fq%3Dhello%20world";
const decodedURL = decodeURIComponent(encodedURL);
document.getElementById("url").textContent = decodedURL; // Output on the browser UI: "https://sample.com/search?q=hello world"

Tools for Encoding and Decoding URLs

Aside from the built-in functions in most programming languages used to encode and decode URLs, there are tools available online for doing basic encoding and decoding operations. Examples of such tools are urlencode.org, urldecoder.org, and gochyu url encode.

These tools are simple to use: enter the URL you want to encode or decode and you get your result.

Conclusion

In conclusion, understanding the concepts of encoding and decoding URLs is essential for any web developer. These processes ensure data integrity, security and accuracy when transmitting data across the internet. Understanding when and how to encode or decode URLs allows developers to develop secure and reliable web apps that handle URL-related tasks efficiently.