Friday, January 10, 2025
Google search engine
HomeLanguagesJavascriptWeb API TextEncoder encodeInto() Method

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: 

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:

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments