Skip to content
Related Articles

Related Articles

Web API | TextEncoder encodeInto() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 06 Aug, 2022
View Discussion
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!