简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to encode and decode URLs in JavaScript?

How to encode and decode URLs in JavaScript?

WBOY
WBOYforward
2023-09-09 14:29:211032browse

The URL of any website requires encoding and decoding of the URI and URI components in order to reach or redirect the user. This is a common task in web development and is typically done when making a GET request to an API using query parameters. The query parameters must also be encoded in the URL string, which will be decoded by the server. Many browsers automatically encode and decode URL and response strings.

For example, a space " " is encoded as or .

Encode URL

You can use the following method in JavaScript to complete the conversion of special characters-

  • encodeURI() function - The encodeURI() function is used to encode the complete URI, that is, convert the special characters in the URI into a language that the browser can understand. Some unencoded characters are: (, / ? : @ & = $ #).

  • encodeURIComponent() function - This function encodes the entire URL instead of just the URI. This component also encodes the domain name.

Syntax

encodeURI(complete_uri_string )
encodeURIComponent(complete_url_string )

Parameters

  • ##complete_uri_string string - It holds the URL to be encoded.

  • complete_url_string string - It holds the complete URL string to be encoded.

The above function returns the encoded URL.

Example 1

In the following example, we use the encodeURI() and encodeURIComponent() methods to encode the URL.

# index.html 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Encoding URI</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      const url="https://www.tutorialspoint.com/search?q=java articles";
      document.write(&#39;<h4>URL: </h4>&#39; + url)
      const encodedURI=encodeURI(url);
      document.write(&#39;<h4>Encoded URL: </h4>&#39; + encodedURI)
      const encodedURLComponent=encodeURIComponent(url);
      document.write(&#39;<h4>Encoded URL Component: </h4>&#39; + encodedURLComponent)
   </script>
</body>
</html>

Output

如何在 JavaScript 中对 URL 进行编码和解码？##Decoded URL

Decoding of URL This can be done using the following methods -

  • decodeURI() function

    The -decodeURI() function is used to decode a URI i.e. convert special characters back to the original URI language.

  • decodeURIComponent( ) Function

    - This function decodes the complete URL back to its original form. decodeURI decodes only the URI part, whereas this method decodes the URL, including the domain name.

    • Syntax
decodeURI(encoded_URI )
decodeURIComponent(encoded_URL

Parameters

    ##encoded_URI URI
  • - It accepts creation by encodeURI() function The input of the encoded URL.

    • encoded_URL URL
  • - It accepts input of encoded URL created by encodeURIComponent() function.

    These functions will return the decoded format of the encoded URL.
Example 2

In the following example, we use decodeURI() and decodeURIComponent() methods to decode an encoded URL to its encoded URL. original form.

##index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Encode & Decode URL</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      const url="https://www.tutorialspoint.com/search?q=java articles";
      const encodedURI = encodeURI(url);
      document.write(&#39;<h4>Encoded URL: </h4>&#39; + encodedURI)
      const encodedURLComponent = encodeURIComponent(url);
      document.write(&#39;<h4>Encoded URL Component: </h4>&#39; + encodedURLComponent)
      const decodedURI=decodeURI(encodedURI);
      document.write(&#39;<h4>Decoded URL: </h4>&#39; + decodedURI)
      const decodedURLComponent = decodeURIComponent(encodedURLComponent);
      document.write(&#39;<h4>Decoded URL Component: </h4>&#39; + decodedURLComponent)
   </script>
</body>
</html>
Output

The above is the detailed content of How to encode and decode URLs in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html String 字符串 function
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Create a JavaScript-enabled HTML table with sorting capabilitiesNext article：Create a JavaScript-enabled HTML table with sorting capabilities

Related articles

See more