JSFiddle - React, Tailwind, and code Playground

by acdcjunior

HTML

hello
<div style="color: green">
    how are
    <br/>a<span style="color: red">re yo</span>u
    <br/>try copying
</div>
and <span style="color: blue">pasting</span> somewhere else
<hr>
<textarea rows="17" cols="70">
copy some text above and paste here
(to see the colors, paste on a RICH TEXT editor, like Microsoft Word)
</textarea>

JavaScript

function addLink() {
    var selection = window.getSelection();

    var htmlDiv = document.createElement("div");
    for (var i = 0; i < selection.rangeCount; ++i) {
        htmlDiv.appendChild(selection.getRangeAt(i).cloneContents());
    }
    var selectionHTML = htmlDiv.innerHTML;

    var pagelink = "<br/><br/>Read more: http://www.stackoverflow.com/ <br/>";
    var copytext = selectionHTML + pagelink;
    
    var newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function () { document.body.removeChild(newdiv); }, 0);
}
document.oncopy = addLink;