URL Encode JavaScript

What is URL in JavaScript?

In JavaScript, the term URL generally denotes the Uniform Resource Locator, which is a reference to a web resource that indicates its position on a computer network as well as the method for accessing it.

In straightforward terms, the URL object is an intrinsic object that offers utility functions for handling URLs. It consists of a sequence of characters that designate locations on the World Wide Web.

They serve as essential components of web browsing, providing guidance to web browsers on how to find resources like web pages, images, scripts, and various files across the internet.

Components of URL

Scheme

The scheme denotes the method utilized to reach a resource on the web. Several frequently used schemes include "http", "https", "ftp", "file", among others. For instance, in the URL https://logic-practice.com,, the scheme is "https".

Domain

The domain refers to the user-friendly name that is associated with a particular IP address on the internet. In the URL https://logic-practice.com,, the domain is identified as www.logic-practice.com.

The port number is not mandatory and indicates the communication endpoint at which the resource can be accessed. In the absence of a specified port, the default port associated with the scheme is utilized. For instance, in the URL https://logic-practice.com:8080,, the port is "8080".

The path indicates the position of a particular resource on the server. It begins following the domain and may include subdirectories as needed. For instance, in the URL "https://logic-practice.com/product/software",", the path is "/products/software".

Query parameter

Query parameters serve the purpose of transmitting data to the server within the URL. They are distinguished from the remainder of the URL by a question mark (?) and are formatted as key-value pairs that are divided by ampersands (&). For instance, in the URL "https://logic-practice.com/search?q=javascript&page=1",, the query parameters included are "q=javascript&page=1".

Fragment Identifier

The fragment identifier, commonly referred to as the hash, denotes a particular segment within a document. It is represented by a hash symbol (#) succeeded by an identifier. For instance, in the URL https://logic-practice.com/about#team,, the fragment identifier is "team."

How to use the URL object in JavaScript?

In JavaScript, the built-in URL object allows us to interact with URLs effectively. This object offers various properties and methods that enable us to parse, modify, and create URLs. Let’s explore the usage of the URL object:

Creating a URL Object

A new URL object can be instantiated by providing a URL string as an argument to the constructor. For instance:

const url = new URL('https://logic-practice.com/search?q=javascript&page=1');

Accessing URL components

After obtaining a URL object, you can retrieve its different parts, including the protocol, hostname, pathname, search, and more, by utilizing its properties. For instance:

console.log(url.protocol); // Output: "https:"
console.log(url.hostname); // Output: "www.logic-practice.com"
console.log(url.pathname); // Output: "/search"
console.log(url.search);   // Output: "?q=javascript&page=1"

Modifying URL components

We have the capability to alter various parts of a URL and create a new URL string by utilizing the properties and methods of the URL object. For instance:

g the URL object's properties and methods. For example:
url.hostname = 'subdomain.example.com';
url.searchParams.set('q', 'web development');
console.log(url.href); // Output: "https://subdomain.example.com/search?q=web%20development&page=1"

Getting the current page

To retrieve the current URL of the webpage you are visiting, utilize the window.location.href property.

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

Modifying URL components

The searchParams attribute of the URL object allows for straightforward adjustments to the query parameters within a URL.

url.searchParams.set("q", "new query");
console.log(currentUrl);
//output: logs out your current URLcode language: JavaScript (javascript)

Constructing new URLs

It is also possible to create new URLs by merging various elements or altering the ones that already exist.

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 Code language: JavaScript (javascript)

Utilizing the URL object in JavaScript allows for straightforward manipulation of URLs, enabling actions such as transmitting, altering, and creating URLs within your web applications.

Why do we Encode URLs in JavaScript?

When handling URLs in JavaScript, particularly with dynamic content, it is crucial to make sure that the URLs are correctly formatted and secure for use. URLs may include special characters like spaces, slashes, question marks, and various others. If these characters are not correctly encoded, they might be misread by web servers or browsers, resulting in unanticipated behavior.

encodeURIComponent Function

JavaScript includes a native function known as encodeURIComponent, which is specifically intended for encoding URLs. This function accepts a string as its parameter and produces a new string where specific characters have been substituted with their corresponding hexadecimal escape sequences. These escape sequences are formed by a percent sign (%) followed by a pair of hexadecimal digits.

Syntax

Here's the syntax:

encodeURIComponent(uriComponent)

uriComponent: the string to be encoded.

The encodeURIComponent method is responsible for encoding all characters with the exception of the following: alphabetic characters, numerical digits, and the special symbols "-", "_", ".", and "~". Additionally, this function encodes space characters as "%20" instead of using the "+" character, which is commonly employed for encoding spaces in query strings.

Example

Below is an illustration demonstrating the application of encodeURIComponent:

var originalString = "Hello, world! This is a test & example.";
var encodedString = encodeURIComponent(originalString);
console.log(encodedString);

Output:

Hello%2C%20world%21%20This%20is%20a%20test%20%26%20example.

As demonstrated, special symbols such as commas, spaces, exclamation points, and ampersands have been accurately encoded, ensuring that the resulting string is secure for inclusion in a URL.

The encodeURI function

In JavaScript, the encodeURI function serves the purpose of encoding a complete URI, which encompasses the full URL. This function does not encode specific characters that are permissible within a URI, including letters, numbers, 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 ("+")

Lets take a simple example:

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

The outcome will be identical to the specified URL since the encodeURI function does not encode certain characters, including the slash, period, and colon.

When we apply the encodeURIComponent function to the same example, we will notice that certain characters are transformed into their encoded representations. To illustrate this, let’s consider the following example:

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

Now, let's examine a more intricate scenario where the value that needs to be encoded is a query parameter in the URL.

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 method assists in encoding the space character within the query input as "%20". Conversely, the encodeURIComponent function encodes not only the space character but also the colon and the slash found in the query parameter.

When to use URL Encode in JavaScript?

In JavaScript, the process of URL encoding is employed to transform special characters within a URL into a format that can be securely transmitted across the internet. This encoding technique is commonly utilized in JavaScript when dynamically generating URLs, particularly when handling user input or information obtained from external sources.

Below are several typical situations in which URL encoding would be applied in JavaScript:

Query Parameters

When generating URLs that include query parameters, it is essential to apply URL encoding to the values of these parameters. This practice guarantees that special characters, such as spaces, ampersands, and slashes, are managed correctly.

var searchTerm = "user input with spaces";
var url = "https://logic-practice.com/search?q=" + encodeURIComponent(searchTerm);

Form Submission

When we send form data using JavaScript, it is often necessary to encode the values of the form to guarantee that they are transmitted accurately.

var formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "john@example.com");
// Use fetch API or XMLHttpRequest to send formData

Dynamic URL construction

When dynamically generating URLs using data sourced from variables or API responses, it is essential to encode any segments of the URL that may include special characters.

var dynamicValue = "some data with special characters: &/?=";
var url = "https://logic-practice.com/" + encodeURIComponent(dynamicValue);

AJAX Request

When executing AJAX requests using either XMLHttpRequest or the fetch API, it is crucial to URL encode any data included in the URL or the request body that might contain special characters.

var url = "https://logic-practice.com/api?param=" + encodeURIComponent(value);
fetch(url, {
    method: 'POST',
    body: JSON.stringify({ key: 'value' }),
    headers: {
        'Content-Type': 'application/json'
    }
});

Utilizing the encodeURIComponent function in these contexts guarantees that your URLs are correctly structured and secure for online transmission.

Conclusion

To summarize, handling URLs in JavaScript is essential for web development, allowing developers to effectively manage, alter, and create URLs on the fly. The URL object offers a user-friendly interface for dissecting and adjusting various components of a URL, while methods such as encodeURIComponent and encodeURI guarantee that URLs are correctly formatted and secure for online transmission, particularly when managing special characters or user-supplied data.

Grasping the elements of a URL, including the scheme, domain, path, query parameters, and fragment identifier, is crucial for proficient web development. Utilizing the features of JavaScript's URL object and its encoding functions, developers are able to create resilient web applications that manage URLs in a secure and precise manner, thereby improving user experience and preserving data integrity.