Web API | TextDecoder decode() Method

Last Updated : 11 Jul, 2022

The decode() method in TextDecoder API is used to takes a stream of bytes as input and emits a stream of code points. The TextEncoder decode() method takes an ArrayBuffer containing the encoded data and options object and returns the original string (i.e. decoded string).

Syntax:

decoder.decode(buffer, options)

Parameters:

buffer: It is an ArrayBuffer, Dataview or TypedArray instance that contains the encoded data.
options: It is an optional parameter that holds an object containing some properties.
- stream: It is a boolean value. It is set to true if data are processing in chunks and false if data are not chunked (by default its value set to false)

Return Value: It decodes the encoded input in buffer and returns the decoded string.

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">
 
        // Original string
        const original = document.querySelector(
                '#javascript').textContent
 
        // Instance of TextEncoder
        const encoder = new TextEncoder()
 
        // Instance of TextDecoder
        const decoder = new TextDecoder()
 
 
        // encode() is just an another method
        // defined in TextEncoder class
        // It specifies the encoded result
        // of strings
        const encodedResult = encoder.encode(original)
 
        // Decoding
        const decodedResult = decoder.decode(encodedResult)
 
        console.log(`
            Original String:  ${original},
            Encoded Value:   ${encodedResult},
            Decoded Value:   ${decodedResult}
        `)
 
    </script>
</body>
 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GFG TextEncoder encodeInto() method</title>
</head>
 
<body>
    <p id='javascript' hidden>I Love javascript</p>
 
    <button id='btn'>Click me to see results</button>
    <div id='result'></div>
 
    <script type="text/javascript">
 
        // Original string
        const original = document.querySelector(
                '#javascript').textContent
 
        const btn = document.querySelector('#btn')
        const result = document.querySelector('#result')
 
        // Instance of TextEncoder
        const encoder = new TextEncoder()
 
        // Instance of TextDecoder
        const decoder = new TextDecoder()
 
        // encode() is just an another method
        // defined in TextEncoder class
        // It specifies the encoded result of strings
        const encodedResult = encoder.encode(original)
 
        // Decoding
        const decodedResult = decoder.decode(encodedResult)
 
        // Button listing for click event, when
        // click occurs shows original string and 
        // Encoded and Decode values
 
        btn.addEventListener('click', () => {
            result.innerHTML = `
           Original: ${original}
           Encoded Value: ${encodedResult}
           Decoded Value: ${decodedResult}`
        })
    </script>
</body>
 
</html>