background-color: #f5f5f5;

font-size: 16px;

font-family: Helvetica, Arial, sans-serif;

overflow: auto;

}

#output-container {

<p>Copy formatted text from a webpage and paste here to extract the HTML:p>

<div id="paste-area" contenteditable="true">div>

<p class="info-text">Paste using Ctrl+V or +V to capture the rich text HTMLp>

<p class="info-text">Paste using Ctrl+V or +V to capture the rich text HTML. For best results on Windows, try pasting into word processors first.p>

<div id="output-container">

<h2>HTML codeh2>

pasteArea.addEventListener('paste', function(e) {

// Get HTML data from clipboard

const clipboardData = e.clipboardData || window.clipboardData;

const pastedHtml = clipboardData.getData('text/html');

if (pastedHtml) {

// Prevent default paste

e.preventDefault();

// Display the HTML code with escaped characters

htmlOutput.value = pastedHtml;

// Show the output container

outputContainer.style.display = 'block';

// Show preview of how the HTML renders

previewContent.innerHTML = pastedHtml;

// Let the paste happen normally first

setTimeout(() => {

// Get current HTML content after the paste

const pastedContent = pasteArea.innerHTML;

// Let user know paste was successful

pasteArea.innerHTML = '

Content pasted. HTML extracted.

';

}

if (pastedContent) {

// Display the HTML code with escaped characters

htmlOutput.value = pastedContent;

// Show the output container

outputContainer.style.display = 'block';

// Show preview of how the HTML renders

previewContent.innerHTML = pastedContent;

// Let user know paste was successful

pasteArea.innerHTML = '

Content pasted. HTML extracted.

';

}

}, 0);