Encode URL in JavaScript

encodeURI vs encodeURIComponent: Usage and comparison

Parameters: Choose wisely

While encodeURI() encodes a URL, excluding characters like #, ?, and &, encodeURIComponent() encodes literally everything that can break the URL structure. This function is perfect not just for protecting URL syntax, but also for preserving integrity of parameter values and GET query strings.

Nested URLs: Keeping family together

For Nested URLs, encodeURIComponent() is a necessity to maintain URL hierarchy. Forget this, and you might just send your web application into the chaotic depths of parsing errors and application glitches.

escape(): Run away from this one

The deprecated escape() function has inconsistent browser support and falls short on reliable character handling. It's like a non-trusty sidekick. Stick with the superhero, encodeURIComponent(), for universal support and reliable encoding.

Practical applications of encoding

Space: the final frontier

Some APIs might favor + symbols over %20 for spaces. In such cases, you can swap spaces after encoding:

let encoded = encodeURIComponent('Hello World').replace(/%20/g, '+');
// Output: 'Hello+World'. Hello, one-word sentence.


Template literals: Readability level 1000

Use template literals for super readable and maintainable encoded URLs:

const baseURL = 'https://example.com/search?';
const query = 'fußball';
const fullURL = `${baseURL}q=${encodeURIComponent(query)}`;
// Output: 'https://example.com/search?q=fu%C3%9Fball'
// Fußball, not just any ball.


Folder names: Encode with passion

When encoding folder or file names within a path, apply encodeURIComponent() directly to path segments:

const folderName = 'photos & videos';
const encodedFolderName = encodeURIComponent(folderName);
const filePath = `/archive/${encodedFolderName}/file.txt`;
// I wonder what file.txt has to say?


Library solutions and special cases

Libraries: More encoding power

While encodeURIComponent() get the job done, jQuery and qs offer $.param and qs.stringify, adding extra functionality for your convenience.

Special characters: Those special snowflakes

For the occasional case-specific or incorrect character, a utility function or regex can be your problem solver.

Knowledge: A never ending journey

Web development is always evolving. Be sure to keep progressing and updating your knowledge of URI encoding practices to stay on top of your game. Embrace the coding expansion! 🚀