Add extra info (copyright notice/read more link) to copied text and preserve formatting (line breaks and color)

Question

I am using this code to add a read more link to my copied text but the line breaks and formatting are ignored:

 <script type='text/javascript'>
function addLink() {
    var body_element = document.getElementsByTagName(&#39;body&#39;)[0];
    var selection;
    selection = window.getSelection();
  var pagelink = &quot;<br/><br/> Mai multe Bancuri pe: http://bancuricubarbatisifemei.blogspot.com/ <br/>&quot;; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement(&#39;div&#39;);
    newdiv.style.position=&#39;absolute&#39;;
    newdiv.style.left=&#39;-99999px&#39;;
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}
document.oncopy = addLink;
</script>

How to preserve them?

First thing, get rid of those entities and write the javascript normally. That should make it a lot easier to follow what's going on. — Joe Enos, Jun 18 '13 at 18:01
I found this code on a website. I'm not familiar with javascript coding. I need a code to preserve line breaks when text is copied from my website. Thank you — Pescu Vili, Jun 18 '13 at 18:04

acdcjunior · Accepted Answer · 2014-01-07T18:58:48.010

2

The selection is being copied as plain text, to preserve the line breaks and formatting, you must get the selected text as HTML.

JSFiddle demo here

JavaScript code:

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;

edited Jan 07 '14 at 18:58

answered Jun 18 '13 at 18:17

acdcjunior

132,397
37
331
304

Thank you acdcjunior! This is what i was searching for. But i still don't know what to do. When i remove this code, the line breaks are preserved, when i put it back, text is selecting inline. I will keep searching. Thank you all – Pescu Vili Jun 18 '13 at 18:22
Did you change the `var copytext = selectionHTML + pagelink; // <---- changed line` line as well? I'm not sure I understand what you mean. – acdcjunior Jun 18 '13 at 18:25
To understand me go to http://bancuricubarbatisifemei.blogspot.com/ and copy some text and paste it somewhere to see what happens. – Pescu Vili Jun 18 '13 at 18:40
I forgot, copy more lines, not just one – Pescu Vili Jun 18 '13 at 18:41
Yeah, I did. Right now the line breaks are not preserved. Did you add my modified code? – acdcjunior Jun 18 '13 at 18:42
i gent an error on this line and i can not save template for (var i = 0; i < selection.rangeCount; ++i) { – Pescu Vili Jun 18 '13 at 18:48
I get "The content of elements must consist of well-formed character data or markup" on that line of code – Pescu Vili Jun 18 '13 at 18:49
I found the problem i replaced < with < . Thank you so so much . Now works perfect :D Thank you all again. Stackoverflow best site :D – Pescu Vili Jun 18 '13 at 18:55

score 0 · Answer 2 · edited May 23 '17 at 10:27

You somehow missed a few quotes, believing this or this, is where it came from.

Guess it works as you intend, after following corrections (Working Demo):

function addLink() {
        var body_element = document.getElementsByTagName("body")[0];
        var selection = window.getSelection();
        var pagelink = '< br/> < br/> Mai multe Bancuri pe: http://bancuricubarbatisifemei.blogspot.com/ <br/>'; 
        var copytext = selection + pagelink;
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {
            body_element.removeChild(newdiv);
        }, 0);
    }

document.oncopy = addLink;

EDIT:

Try using pre instead of div & newline character ('\n') to preserve line breaks. (Updated Demo)

function addLink() {
        var body_element = document.getElementsByTagName("body")[0];
        var selection = window.getSelection();
        var pagelink = '\n\nMai multe Bancuri pe: http://bancuricubarbatisifemei.blogspot.com/\n'; 
        var copytext = selection + pagelink;
        var newdiv = document.createElement('pre');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {
            body_element.removeChild(newdiv);
        }, 0);
    }

document.oncopy = addLink;

the code is working properly but there is another issue. The text is copied inline and the line breaks are ignored. I want to preserve the line breaks when the text is copied. Thank you — Pescu Vili, Jun 18 '13 at 18:17
Please see the updated demo, the line breaks are now preserved. — loxxy, Jun 18 '13 at 18:25
To understand me go to http://bancuricubarbatisifemei.blogspot.com and copy some lines of text and paste it somewhere to see what happens — Pescu Vili, Jun 18 '13 at 18:51

Add extra info (copyright notice/read more link) to copied text and preserve formatting (line breaks and color)

2 Answers2