The encodeInto() method in TextEncoder API is used to take stream of points and emits the stream of UTF-8 bytes. All instances of TextEncoder only support UTF-8 encoding. The TextEncoder.encodeInto() takes a string to encode and an array to hold the encoded result and returns an object back.
Syntax:
encoder.encodeInto(src, dest)
Parameter:
- src: It is source string that containing the text to encode.
- dest: It is Uint8Array object instance to store the encoded result.
Return Value: It returns an object containing two properties read and written
- read: It is an numerical value that specifies the number of string character converted to UTF-8. This may be less then src.length(length of source string) if uint8Array did not have that enough space.
- dest: It is also a numerical value that specifies the number of UTF-8 unicodes stored in destination Uint8Array object Array. It is always equals to read.
Example 1:
html
<!DOCTYPE html><html lang="en"><head> <title> TextEncoder Web API encodeInto() method </title></head><body> <p id='javascript'>I love javascript</p> <script type="text/javascript"> const parg1 = document. querySelector('#javascript') // Instance of TextEncoder const encoder = new TextEncoder() // Instance of Uint8Array const u8Array = new Uint8Array(30) const result = encoder.encodeInto( parg1.innerText, u8Array) // encode() is just an another method // defined in TextEncoder class // It specifies the encoded result // of strings const encodedResult = encoder .encode(parg1.innerText) console.log(` Bytes read: ${result.read}, Bytes written: ${result.written}, Encoded Result: ${encodedResult} `) </script></body></html> |
Output:

Example 2:
html
<!DOCTYPE html><html lang="en"><head> <title> TextEncoder Web API encodeInto() method </title></head><body> <p id='javascript'>I Love javascript</p> <button id='btn'> Click me to view results </button> <p id='result'></p> <script type="text/javascript"> const parg1 = document.querySelector('#javascript') const btn = document.querySelector('#btn') const result = document.querySelector('#result') // Instance of TextEncoder const encoder = new TextEncoder() // Instance of Uint8Array const u8Array = new Uint8Array(30) let resultObj = encoder.encodeInto( parg1.innerText, u8Array) const encodedResult = encoder.encode(parg1.innerText) btn.addEventListener('click', () => { result.innerHTML = ` <p><strong>Bytes read:</strong> ${resultObj.read}, </p> <p><strong>Bytes written:</strong> ${resultObj.written}, </p> <p><strong>Encoded Result:</strong> ${encodedResult}</p> ` }) </script></html> |
Output: Before Clicking the Button:

After Clicking the Button:
