How to Preserve HTML (Strictly) in Copied Text?

Question

To add extra info in bottom of copied text - I want to use the following JS:

<script>
    document.addEventListener('copy', (event) => {
      const pagelink = `\n\nRead more at: ${document.location.href}`;
      event.clipboardData.setData('text', document.getSelection() + pagelink);
      event.preventDefault();
    });
</script>


Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

Since it's the most recent version. But the problem is, it does NOT preserve the HTML tags and attributes like a, style, textarea etc. unlike default copy/paste (verified the results in MS-Word). It's not even hyperlink the url.

Is there anyway I can preserve the HTML stuff (like default or better) and also add reference in copied text?

Or is any better small piece of code that works cross-browser?

See this - https://stackoverflow.com/questions/25941559/is-there-a-way-to-keep-execcommandinserthtml-from-removing-attributes-in-chr — NiRUS, May 02 '20 at 17:44

score 1 · Answer 1 · answered May 02 '20 at 14:43

You need to have a custom method that returns the HTML of the selected contents. Below is the working snippet.

function getSelectionHtml() {
  var html = "";
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var container = document.createElement("div");
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
      }
      html = container.innerHTML;
    }
  } else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
      html = document.selection.createRange().htmlText;
    }
  }
  return html;
}

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  var html = getSelectionHtml();
  event.clipboardData.setData('text/plain', html + pagelink);
  event.preventDefault();
});

<p>
  Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit.<br/>
</p>

<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

How to Preserve HTML (Strictly) in Copied Text?

1 Answers1