How to encode and decode URLs in JavaScript?-JS Tutorial-php.cn

How to encode and decode URLs in JavaScript?

WBOY

Release： 2023-09-09 14:29:21

forward

1031 people have browsed it

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 )

Copy after login

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>

Copy after login

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.

decodeURI(encoded_URI )
decodeURIComponent(encoded_URL

Copy after login

Parameters

- It accepts creation by encodeURI() function The input of the encoded 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>

Copy after login

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!