Related Articles

Related Articles

Web API | TextEncoder encodeInto() Method
  • Last Updated : 08 Jul, 2020

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
Recommended Articles
Page :