Web API TextEncoder encodeInto() Method

Last Updated : 06 Apr, 2023

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>