How to Encode and Decode URLs in React and JavaScript

Learn how to encode and decode URLs in JavaScript and React Js using built-in functions such as encodeURI, encodeURIComponent, decodeURI, and decodeURIComponent. These functions are useful for passing data in query strings, handling special characters, and creating valid URLs.

written

reviewed

updated

How can I encode a URL using React.js?

Encoding a URL inReact Js involves converting special characters to their corresponding URL-encoded representations using the encodeURIComponent() function.

React Url Encode Example

    <script type="text/babel">
        const { useState, useEffect } = React
        function App() {
            const url = 'https://fontawesomeicons.com/search?q=React.js';
            const encodedUrl = encodeURIComponent(url);

            return (
                <div className='container'>
                    <h3>React Js Encode Url</h3>
                    <p className='original-url'>Original URL: {url}</p>
                    <p className='encoded-url'>Encoded URL: {encodedUrl}</p>
                </div>
            );
        };
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React URL Encode String

How can I decode a URL in React.js? Could you provide an example?

Decoding a URL reverses this process, converting URL-encoded characters back to their original form using the decodeURIComponent() function

React Js Decode Url Example

    <script type="text/babel">
        const { useState, useEffect } = React
        function App() {
            const url = 'https%3A%2F%2Ffontawesomeicons.com%2Fsearch%3Fq%3DReact.js';
            const decodedUrl = decodeURIComponent(url);

            return (
                <div className='container'>
                    <h3>React Js Decode Url</h3>
                    <p>url: {url}</p>
                    <p>Decoded URL: {decodedUrl}</p>
                </div>
            );
        };
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Decode Url

How to Encode URL in Javascript?

If you want to encode a URL or a URL component in JavaScript, you have two built-in functions to choose from: encodeURI() and encodeURIComponent(). These functions replace certain characters with their UTF-8 escape sequences, making the URL safe and valid. However, they have different use cases and encode different sets of characters. You will also see some examples on how to encode spaces, query parameters, and special characters

Javascript URL Encode Example

 <script>
        function encodeString() {
            const originalString = "Hello, World!";
            const encodedString = encodeURIComponent(originalString);

            // Display the strings on the webpage
            document.getElementById("encodedString").textContent = "Encoded String: " + encodedString;
        }
</script>

Run

Pasted Image

JavaScript URL Decode: How to Use decodeURIComponent()

If you want to decode a URL component in JavaScript, you can use the built-in function decodeURIComponent(). This function converts percent-encoded characters back into their original form, such as spaces, special symbols, and non-English letters. In this article, you will learn how to use decodeURIComponent() with examples, how it differs from decodeURI(), and what errors to avoid when decoding a URL component.

Javascript Url Decode Example

  <script>
        function decodeUrl() {
            // URL-encoded string
            const encodedString = "Hello%20World%21";

            // Decode the URL-encoded string
            const decodedString = decodeURIComponent(encodedString);

            // Display the result on the webpage
            document.getElementById("result").textContent = "Decoded String: " + decodedString;
        }
</script>

Run