Clipboard API – return value as html format

October 20, 2022

Is it possible to get the text from the clipboard in HTML format? the below code returns the text as plain text.

navigator.clipboard.readText()
.then(text => {
    console.log(text);
})
.catch(err => {
    console.log('Something went wrong', err);
})

>Solution :

To read any HTML in the clipboard, you can use the navigator.clipboard.read method, find the ClipboardItem within the resulting array that offers HTML (if there is one), and then read that HTML from the item, like this:

/**
 * Read any HTML from the clipboard.
 *
 * @returns A promise that will be fulfilled with the HTML or `undefined` if none
 *          is available, or that will be rejected if any error occurs reading
 *          the clipboard (such as permission from the user being denied).
 */
async function readClipboardHTML() {
    const items = await navigator.clipboard.read();
    const htmlItem = items.find(({types}) => types.includes("text/html"));
    if (htmlItem) {
        const htmlBlob = await htmlItem.getType("text/html");
        const html = await htmlBlob.text();
        return html;
    }
}

Note that you’ll need to have permission from the user for your page to access the clipboard in this way. (Which is why I didn’t do a Stack Snippet — they’re sandboxed such that they don’t allow the browser to ask the user for permission.)

Here’s an example you can copy and paste to run on localhost to see it working (since it seems basically all of the online services sandbox things such that permission can’t even be requested):

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Clipboard HTML Demonstration</title>
    <style>
    body, html {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }
    .error {
        color: #d00;
    }
    </style>
</head>
<body>
<p>You can <strong>copy this paragraph</strong> to make sure you have HTML in your clipboard.</p>
<input type="button" id="btn" value="Get Clipboard HTML">
<script type="module" src="./clipboard-example.js"></script>
<div id="result"></div>
</script>
</body>
</html>

JavaScript:

/**
 * Read any HTML from the clipboard.
 *
 * @returns A promise that will be fulfilled with the HTML or `undefined` if none
 *          is available, or that will be rejected if any error occurs reading
 *          the clipboard (such as permission from the user being denied).
 */
async function readClipboardHTML() {
    const items = await navigator.clipboard.read();
    const htmlItem = items.find(({types}) => types.includes("text/html"));
    if (htmlItem) {
        const htmlBlob = await htmlItem.getType("text/html");
        const html = await htmlBlob.text();
        return html;
    }
}

const btn = document.getElementById("btn");
const result = document.getElementById("result");
btn.addEventListener("click", () => {
    result.classList.remove("error");
    result.textContent = "";
    readClipboardHTML()
    .then((html) => {
        if (typeof html === "undefined") {
            result.textContent = `No HTML available in the clipboard`;
        } else {
            result.textContent = `HTML: ${html}`;
        }
    })
    .catch((error) => {
        result.classList.add("error");
        result.textContent = `Error: ${String(error)}`;
    });
});