Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to encode a string in JavaScript?
In JavaScript, string encoding converts text into different formats for various purposes like URL handling, Base64 encoding, or data transmission. JavaScript provides several built-in methods for encoding strings depending on your specific needs.
Encoding is the process of converting data from one format to another. Unlike encryption, encoding doesn't require keys and is primarily used to ensure data remains usable across different systems and protocols.
Using btoa() Method
The btoa() method encodes a string into Base64 format, which is commonly used for data transmission and storage.
Syntax
btoa(string)
Where string is the text to be encoded. Returns a Base64-encoded string.
Example
<!DOCTYPE html>
<html>
<body>
<p id="result1"></p>
<script>
var str = "Tutorials Point";
var encoded = btoa(str);
document.getElementById('result1').innerHTML =
'Original: "' + str + '"<br>' +
'Base64 Encoded: ' + encoded;
</script>
</body>
</html>
Original: "Tutorials Point" Base64 Encoded: VHV0b3JpYWxzIFBvaW50
Using encodeURI() Method
The encodeURI() method encodes complete URIs by replacing special characters with UTF-8 escape sequences. It preserves characters that have special meaning in URIs like :, /, and ?.
Syntax
encodeURI(uri)
Example
<!DOCTYPE html>
<html>
<body>
<p id="result2"></p>
<script>
var str = "Tutorials Point Website";
var url = "https://example.com/search?q=hello world";
document.getElementById('result2').innerHTML =
'String encoded: ' + encodeURI(str) + '<br>' +
'URL encoded: ' + encodeURI(url);
</script>
</body>
</html>
String encoded: Tutorials%20Point%20Website URL encoded: https://example.com/search?q=hello%20world
Using encodeURIComponent() Method
The encodeURIComponent() method encodes URI components more aggressively than encodeURI(). It encodes all special characters including #, &, $, /, :, ;, @, and ?.
Syntax
encodeURIComponent(value)
Example
<!DOCTYPE html>
<html>
<body>
<p id="result3"></p>
<script>
var str = "Tutorials Point!";
var url = "https://example.com/search?q=hello&world";
document.getElementById('result3').innerHTML =
'String: ' + encodeURIComponent(str) + '<br>' +
'URL: ' + encodeURIComponent(url);
</script>
</body>
</html>
String: Tutorials%20Point! URL: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%26world
Comparison
| Method | Use Case | Encodes Special URI Characters |
|---|---|---|
btoa() |
Base64 encoding | N/A |
encodeURI() |
Complete URLs | No - preserves :/?#[]@ |
encodeURIComponent() |
URL parameters/components | Yes - encodes all special chars |
Key Points
- Use
btoa()for Base64 encoding of any string data - Use
encodeURI()when encoding complete URLs - Use
encodeURIComponent()for URL parameters and query strings - These methods have corresponding decode functions:
atob(),decodeURI(), anddecodeURIComponent()
Conclusion
Choose the appropriate encoding method based on your needs: btoa() for Base64, encodeURI() for complete URLs, and encodeURIComponent() for URL components. Each serves different purposes in web development and data handling.
27K+ Views
