{"id":915,"date":"2024-02-20T08:13:21","date_gmt":"2024-02-20T14:13:21","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=915"},"modified":"2024-02-20T08:13:21","modified_gmt":"2024-02-20T14:13:21","slug":"encoding-and-decoding-urls-in-javascript","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/encoding-and-decoding-urls-in-javascript\/","title":{"rendered":"Encoding and Decoding URLs in JavaScript"},"content":{"rendered":"\n

URL, which stands for U<\/strong>niform R<\/strong>esource L<\/strong>ocator, is an address to access resources on the internet. Each URL points to a unique resource on the web. URLs can sometimes contain special characters or need to be manipulated dynamically.<\/p>\n\n\n\n

In this article, we\u2019ll explore the modern techniques for working with URLs in JavaScript, and answer the how<\/strong>, why<\/strong> and when<\/strong> questions relating to encoding and decoding URLs in JavaScript.<\/p>\n\n\n\n

When you type something into a browser, a search result or various search results are provided. These search results come in a confusing format with text and special characters such as %, +,?, =, &, <, >, and so on.<\/p>\n\n\n\n

Look at this result from the Frontend Masters ‘courses’ section on the blog page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

See the special characters in the URL on the search bar? They’re referred to as encoded characters.<\/p>\n\n\n\n

As a way to familiarize yourself and see how common they are, try searching something in your browser to see the results and identify the encoded characters. For example, try searching ‘What are URLs?’.<\/p>\n\n\n\n

Working with URLs in JavaScript<\/h2>\n\n\n\n

Before getting into encoding and decoding URLs, we need to learn how to work with URLs in JavaScript. This is useful for when you need to construct, parse, and manipulate web addresses. Modern JavaScript provides a built-in URL<\/code> class, which offers powerful features for working with URLs:<\/p>\n\n\n\n

    \n
  1. Creating a URL object:<\/strong> To work with URLs in JavaScript, you can create a URL object using this URL syntax.<\/li>\n<\/ol>\n\n\n
    const<\/span> url = new<\/span> URL(\"https:\/\/sample.com\/search?q=hello world\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      \n
    1. Accessing URL components:<\/strong> You can access various components of the URL once you have a URL object. You can access components such as the: