What is the difference between encodeURI() and encodeURIComponent() in JavaScript?

Angelos Chalaris · Jan 7, 2021 ·

JavaScript, Browser

encodeURIComponent()

The encodeURIComponent() function encodes everything in the given string, except A-Z a-z 0-9 - _ . ! ~ * ' ( ). You should use this function if the string you are encoding is only part of a URL.

const partOfURL = 'my-page#with,speci@l&/"characters"?';
const fullURL = 'https://my-website.com/my-page?query="a%b"&user=1';

encodeURIComponent(partOfURL); // Good, escapes special characters
// 'my-page%23with%2Cspeci%40l%26%2F%22characters%22%3F'

encodeURIComponent(fullURL);  // Bad, encoded URL is not valid
// 'https%3A%2F%2Fmy-website.com%2Fmy-page%3Fquery%3D%22a%25b%22%26user%3D1'

encodeURI()

The encodeURI() function encodes everything in the given string, except A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #. You should use this function if the string you are encoding is a full URL.

const partOfURL = 'my-page#with,speci@l&/"characters"?';
const fullURL = 'https://my-website.com/my-page?query="a%b"&user=1';

encodeURI(partOfURL); // Bad, does not escape all special characters
// 'my-page#with,speci@l&/%22characters%22?'

encodeURI(fullURL);  // Good, encoded URL is valid
// 'https://my-website.com/my-page?query=%22this%25thing%22&user=1'

Recommended snippets

  • copyToClipboard

    JavaScript, Browser

    Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).

  • observeMutations

    JavaScript, Browser

    Creates a new MutationObserver and runs the provided callback for each mutation on the specified element.

  • recordAnimationFrames

    JavaScript, Browser

    Invokes the provided callback on each animation frame.