Definition and Usage

The encodeURIComponent() function encodes URI components such as query parameter values.

It is primarily used to safely encode individual URI components like query string values, keys, or path segments.

Features

  • The encodeURIComponent() function encodes characters in a URL that have special meaning, including protocol, domain, and path delimiters like /, :, ?, &, and #.
  • This makes it useful when you need to encode a URI component—such as a query parameter value.
  • Because it encodes most special characters such as /, :, ?, &, and =, it is not suitable for encoding a full URL when the structure must be preserved. These characters are essential for defining URL structure—such as protocol, path, and query separation. If they are all encoded, the browser will no longer recognize the string as a valid URL. (However, this is not a problem if the string is stored or transmitted purely as data. In fact, this kind of encoding is safer for such use cases.)

Note:
When encoding an entire URL—not just a URI component—the encodeURI() function is more appropriate.

Basic Example

JavaScript 
const uriComponent = "https://www.example.com/search?q=JavaScript & Web Development";
const encodedUriComponent = encodeURIComponent(uriComponent);

console.log(encodedUriComponent);
// Output: "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%20%26%20Web%20Development"

What Is a URI Component?

A URI (Uniform Resource Identifier) consists of several components. Typically, a URI is made up of the following four main parts:

  1. Scheme: Indicates the protocol, such as HTTP, HTTPS, or FTP.
  2. Authority: Includes the hostname, domain name, and optionally the port number.
  3. Path: Specifies the location of the resource.
  4. Query: Represents the query string.

For example, the following URL contains all four of these components:

Example URI:
  1. Scheme: https
  2. Authority: www.example.com
  3. Path: /path
  4. Query: query=value

A URI component is any one of these parts that make up the full URI. These components help identify and access resources via the URI.

The encodeURIComponent() function is used to encode the data within a URI component. This may include values in the query string, parts of the path, or even fragments (hashes). The function safely encodes special characters within these components—such as &, =, and ?—to ensure the URI is interpreted correctly. It is primarily used to safely transmit data within URI components.

The encodeURIComponent() function has the following syntax:

Syntax

JavaScript 
encodeURIComponent(uriComponent)

Parameters

Parameters of the uriComponent() function
uriComponent A string representing a URI component.

Return value

Returns a new string representing the provided value encoded as a URI component.

Characters Not Encoded by uriComponent()

  • Alphabetic characters (A–Z, a–z)
  • Digits (0–9)
  • -
  • _
  • .
  • !
  • ~
  • *
  • '
  • (
  • )

All other characters not listed above—including spaces—are encoded using a percent sign (%) followed by the character’s Unicode code point in hexadecimal.

Compared to encodeURI(), the encodeURIComponent() function encodes a broader range of special characters. While this isn't a strictly technical distinction, it's common to say that encodeURIComponent() "encodes special characters in a URL."

Example

JavaScript 
const searchQuery = "JavaScript & Web Development";
const page = 1;

const encodedQuery = encodeURIComponent(searchQuery);
const encodedPage = encodeURIComponent(page);

const baseUrl = "https://example.com/search";
const finalUrl = `${baseUrl}?q=${encodedQuery}&page=${encodedPage}`;

console.log(finalUrl);
// Output: "https://example.com/search?q=JavaScript%20%26%20Web%20Development&page=1"

In this example, the search term searchQuery and the page number page are treated as URI components and encoded using the encodeURIComponent() function. A safe URI is then constructed using the encoded values.

Characters like & and =, which have special meanings in query strings, are safely encoded to prevent misinterpretation by the browser.

Specifications

Specification for JavaScript encodeURIComponent() Function
Specification
encodeURIComponent() ECMAScript Language Specification
#sec-encodeuricomponent-uricomponent

Browser compatibility

Browser compatibility for JavaScript encodeURIComponent() Function
Function
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
encodeURIComponent() 1 12 1 1.1

See also