Encode URL in JavaScript: 3 Ways That Will Save Your Site

Introduction: Why URL Encoding Is Not Boring Theory, But a Lifesaver for Your Application

Imagine this scenario: you are writing a web application in JavaScript, a user enters a search query "JavaScript & Node.js: best practices". You pass this text in the URL as a GET request parameter. You open the browser console — and there is an error. Or, even worse, the request goes through, but the server doesn't understand it, and instead of search results, the user sees an empty page.

Sound familiar? If yes — this article is for you. If not — it's still for you, because sooner or later you will encounter this. The topic of URL encoding in JavaScript is one of the most popular questions on Stack Overflow (tens of thousands of views), and for good reason. It's that small detail that distinguishes a professional developer from a beginner.

Today we will cover three ways to encode URLs in JavaScript, learn how to choose the right tool for each task, and look at real-world examples from a web developer's life. Let's go!

What is URL Encoding and Why Is It Needed

Before writing code, let's understand the theory. A URL (Uniform Resource Locator) has a strict structure. Only certain characters are allowed: Latin letters, digits, and some special characters (-, _, ., ~). However, spaces, Cyrillic characters, symbols like &, ?, #, and others are forbidden.

When we try to pass such characters in a URL, the browser or server may misinterpret the request. For example, the & character in a query string separates parameters from each other. If it appears inside a parameter value, the logic breaks.

The solution is URL encoding (percent encoding). Forbidden characters are replaced with a sequence like %XX, where XX is the hexadecimal code of the character in UTF-8 encoding. For example, a space becomes %20, and the Cyrillic letter "а" becomes %D0%B0.

In JavaScript, there are three built-in mechanisms for this. Let's break down each one.

Method 1: encodeURI() — For Entire URLs

The encodeURI() function is designed for encoding a complete URL. It replaces all characters except those that are part of the URI syntax: :, /, ?, #, &, =, and others.

Syntax

encodeURI(uri)

Example

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";\nconst encoded = encodeURI(url);\nconsole.log(encoded);\n// Result: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"\n

Note: encodeURI() encoded the spaces but did not touch the &, ?, and = characters. This is correct for a whole URL, but dangerous for parameters. If our query had the & character inside a parameter value, it would remain as is and break the query string.

When to use

\n
• When you need to encode an entire URL (e.g., to pass to window.location)
\n
• When the URL does not contain user data with potentially dangerous characters
\n

When NOT to use

\n
• For encoding individual query parameters
\n
• If the URL contains user input (forms, search, comments)
\n

Method 2: encodeURIComponent() — For Parameters and Values

This is your main everyday tool. encodeURIComponent() encodes all characters except letters, digits, and -, _, ., ~. It will encode even those characters that are part of the URI syntax — &, ?, =, #, and so on.