In JavaScript, the functionalities of TextEncoder and TextDecoder are utilized for encoding and decoding values, correspondingly. The TextEncoder function is designed to transform a given string into the UTF-8 format, employing JavaScript’s capabilities. This process results in the string being converted into a Uint8Array. Conversely, the TextDecoder function is responsible for interpreting particular input bytes and converting them into the desired code point. It supports the decoding of various formats, including ISO-8859-2, KOI8-R, UTF-8, GBK, among others.
TextDecoder using JavaScript
The function is capable of interpreting the value as a JavaScript string by utilizing the native TextDecoder object.
Syntax
To begin with, we can apply the syntax below to interpret the input value.
let decoder_variable = new TextDecoder([input_label], [options]);
- input_label: it typically encodes the value; by default, it is utf-8. There is also support for big5, windows-1251, and many other encodings.
- Options: it is an Optional object in the decoder method.
- Fatal is a boolean value. If the value shows the truth, it causes invalid (non-decodable) characters to be excluded by default. If value shows the false, they are replaced with the character \uFFFD.
- The ignoreBOM is a boolean and is rarely used. If Boolean shows true, then ignores the optional byte-order Unicode mark (BOM).
Decoding comes next, and it works like this:
decoder_variable.decode([input_value], [options]).
- The "input_value" is essential input with the function to decode the buffer source.
- The "options" is the optional object with the decode method.
- When the decoder is constantly called with input data, the stream is true for decoding streams.
Examples
The subsequent examples illustrate the various categories of data utilized for decoding purposes.
Example1
The subsequent illustration demonstrates the specified objects associated with the input label. It enables us to observe the decoded information from the input stream or string. In this case, the example utilizes "Uint8Array" encoded values as the default setting.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder Example using JavaScript </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let string_data = new Uint8Array([104, 101, 108, 108, 111]);
let string_data1 = new Uint8Array([119, 111, 114, 108, 100]);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116, 115]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textDecoder_variable1;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
</script>
</body>
</html>
Output
The image presented below illustrates the decoded information derived from the input value.
Example2
The example provided illustrates the specified objects associated with the input label. It demonstrates the decoded information extracted from the input stream or string. By utilizing the onclick button in conjunction with the event, we can present the data. Additionally, we can observe both the upper-case and lower-case encoded information alongside other related encoded data.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
let string_data1 = new Uint8Array([97, 65, 32, 98, 66, 32, 99, 67, 32, 100, 68]);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116, 115]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textDecoder_variable1;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
}
</script>
</body>
</html>
Output
The image below illustrates the data decoding process for the provided input value.
Example3
The subsequent example illustrates the utilization of TextDecoder alongside a sub-array that employs objects from the input label. Here, we can observe the decoded information derived from the input stream or string, based on the specified array length. An onclick event for a button can be implemented to present the data.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextDecoder with Sub-Array Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
//use sub-array length for the initial two and last two letters
let string_data_sub = string_data.subarray(2, -2);
let string_data2 = new Uint8Array([87, 101, 108, 99, 111, 109, 101, 32, 83, 116, 117, 100, 101, 110, 116, 115]);
//use aub-array length for the initial three and last four letters
let string_data_sub1 = string_data2.subarray(3, -4);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data_sub);
document.getElementById('demo_data').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable2 = textDecoder_variable.decode(string_data_sub1);
document.getElementById('demo_data2').innerHTML = final_textDecoder_variable2;
}
</script>
</body>
</html>
Output
The subsequent image illustrates the process of decoding the data corresponding to the input value.
TextEncoder using JavaScript
The function is capable of reading the value into a string in JavaScript by utilizing the built-in TextDecoder object.
Syntax
To begin with, the subsequent syntax can be utilized to interpret the input value.
let encoder_variable = new TextEncoder();
- It only accepts the "utf-8" encoding.
- It uses two different methods:
- The encode(str) gives an Uint8Array From a text.
- encodeInto(str, destination): it encodes string into the specified Uint8Array target.
In addition, the encode function is utilized following the TextEncoder method.
encoder_variable.encode();
- Encoding transforms data into streams whenever the encoder is repeatedly invoked with input data.
Examples
The examples provided below illustrate the various categories of data that can be utilized for encoding purposes.
Example1
The subsequent illustration demonstrates how the specified objects of the input label are encoded in the necessary format. The encoded information for the input object can be observed directly from the string. In this instance, the example employs "Uint8Array" encoded values by default.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let string_data = "Welcome";
let string_data1 = "Hello World";
let string_data2 = "Welcome To Tutorial!!"
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(string_data);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
</script>
</body>
</html>
Output
The image presented below illustrates the encoded information corresponding to the input value.
Example2
The subsequent example illustrates the specified objects associated with the input label. We can observe the decoded information derived from the input stream or string. By utilizing the onclick button in conjunction with the event, we can present the data. Additionally, we can view the encoded data in both upper-case and lower-case formats, along with other encoded details.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = "JavaScript";
let string_data1 = "Hello World";
let string_data2 = "Welcome Students!"
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(string_data);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(string_data1);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(string_data2);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
}
</script>
</body>
</html>
Output
The image below illustrates the encoded information corresponding to the provided input value.
Example3
The subsequent illustration demonstrates the specified objects associated with the input label. Here, we can observe the decoded information extracted from the input stream or string. Utilizing the onclick button along with the event allows us to present the data. Additionally, we can view a substring derived from the complete string.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<h4> TextEncoder Example using JavaScript </h4>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
function click_data() {
let string_data = "JavaScript";
//use substring with initial word and length of the string
let binary_Str1 = string_data.substring(2, 6);
let string_data1 = "Hello World";
//use the length of the substring
let binary_Str2 = string_data1.substring(0, 4);
let string_data2 = "Welcome Students!";
//use a single sub-string of the entire string
let binary_Str3 = string_data2.substring(5);
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(binary_Str1);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(binary_Str2);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
let final_textEncoder_variable2 = textEncoder_variable.encode(binary_Str3);
document.getElementById('demo_data2').innerHTML = final_textEncoder_variable2;
}
</script>
</body>
</html>
Output
The image below illustrates the encoded data corresponding to the provided input value.
Examples of TextEncoder and TextDecoder
The subsequent example illustrates the integration of TextEncoder and TextDecoder within JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> TextEncoder and TextDecoder using JavaScript </title>
</head>
<body>
<h3> TextEncoder and TextDecoder using JavaScript </h3>
<button type = "button"
onclick = "click_data();">
Click me to display Data </button>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data3"> </p>
<p id = "demo_data4"> </p>
<script>
function click_data() {
let string_data11 = new Uint8Array([104, 101, 108, 108, 111]);
let string_data12 = new Uint8Array([119, 111, 114, 108, 100]);
let textDecoder_variable = new TextDecoder();
let final_textDecoder_variable = textDecoder_variable.decode(string_data11);
document.getElementById('demo_data3').innerHTML = final_textDecoder_variable;
let final_textDecoder_variable1 = textDecoder_variable.decode(string_data12);
document.getElementById('demo_data4').innerHTML = final_textDecoder_variable1;
let string_data = "JavaScript";
//use substring with initial word and length of the string
let binary_Str1 = string_data.substring(2, 6);
let string_data1 = "Hello World";
//use the length of the substring
let binary_Str2 = string_data1.substring(0, 4);
let string_data2 = "Welcome Students!";
//use a single sub-string of the entire string
let binary_Str3 = string_data2.substring(5);
let textEncoder_variable = new TextEncoder();
let final_textEncoder_variable = textEncoder_variable.encode(binary_Str1);
document.getElementById('demo_data').innerHTML = final_textEncoder_variable;
let final_textEncoder_variable1 = textEncoder_variable.encode(binary_Str2);
document.getElementById('demo_data1').innerHTML = final_textEncoder_variable1;
}
</script>
</body>
</html>
Output
The image below illustrates the encoded information corresponding to the input value.
Conclusion
In JavaScript, the TextEncoder and TextDecoder serve the purpose of encoding and decoding text values. These tools are essential for ensuring the confidentiality and security of data.