Web API | TextEncoder encodeInto() Method

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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')
  
        // Instsnce 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>

chevron_right


Output:

Before Clicking the Button:

After Clicking the Button:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai

Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.