TextEncoder and TextDecoder using JavaScript

JavaScript TextEncoder and TextDecoder are the functions to encode and decode the given value, respectively. The TextEncoder works to convert a specified string into the utf-8 standard using the JavaScript function. It transforms the string into a Uint8Array. Using a JavaScript function, the TextDecoder converts specific input bytes into a required code point. It can decode ISO-8859-2, KOI8-R, UTF-8, GBK, and other file types.

TextDecoder using JavaScript

The function can read the value into a JavaScript string using the built-in TextDecoder object.

Syntax

Firstly, we can use the following syntax to decode the input value.

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:

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 following examples show the different types of data to decode the data.

Example1

The following example shows the given objects of the input label. We can see the decoded data of the input stream or string. Here, the example uses, by default, "Uint8Array" encoded values.

<!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 following image shows the decoding data of the input value.

TextEncoder and TextDecoder using JavaScript

Example2

The following example shows the given objects of the input label. We can see the decoded data of the input stream or string. We can use the onclick button with the event to display data. We can see the upper-case and lower-case encoded data with other encoded information.

<!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 following image shows the decoding data of the input value.

Example3

The following example shows TextDecoder with the sub-array using objects of the input label. We can see the decoded data of the input stream or string with the given array length. We can use the onclick button with the event to display 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 following image shows the decoding data of the input value.

TextEncoder using JavaScript

The function can read the value into a JavaScript string using the built-in TextDecoder object.

Syntax

Firstly, we can use the following syntax to decode the input value.

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.

Secondly, the encode function is used after the TextEncoder method.

Encoding converts into streams when the encoder is constantly called with input data.

Examples

The following examples show the different types of data to encode the data.

Example1

The following example shows the given objects of the input label encoded in the required format. We can see the encoded data of the input object from the string. Here, the example uses, by default, "Uint8Array" encoded values.

<!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 following image shows encoding data of the input value.

Example2

<!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 following image shows encoding data of the input value.

Example3

<!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 following image shows encoding data of the input value.

Examples of TextEncoder and TextDecoder

The following example shows the combination of the TextEncoder and TextDecoder in 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 following image shows encoding data of the input value.