Javascript Textbox Copy/Paste Loss of Newline

Question

I have a Tampermonkey script that creates a list of values from checked checkboxes on a webpage. The box displays the data beautifully, each value on a new line below the other. However, I lose the newline characters when I copy and paste these values using Microsoft clipboard. Is there a way to adjust the script in order to allow preservation of the newline characters (\n)?

JavaScript:

var box = document.createElement( 'div' );
box.id = 'myAlertBox';

document.body.appendChild( box );

box.textContent = text + '\n';

var selectedQueries = document.querySelectorAll (query);

selectedQueries.forEach ( (chkBox) => {
    box.textContent += chkBox.title + '\n';
});

CSS:

#myAlertBox {
    font-size: small;
    background: white;
    border: 5px solid green;
    padding: 4px;
    position: absolute;
    top: 280px; right: 80px;
    max-width: 300px;
    white-space:pre-wrap;
}

Newlines in windows are `\r\n`, so... you might find your answer in here https://stackoverflow.com/questions/1155678/javascript-string-newline-character if so we can close as dupe. — , Sep 21 '17 at 15:06
Possible duplicate of [How do I replace all line breaks in a string with
tags?](https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags) — Terry, Sep 21 '17 at 15:09
That is because `\n` is a line-break character, but remember that in HTML all whitespaces are treated as collapsible space (unless you set `white-space: pre`). If you want a line break in HTML, you will have to convert it to `
`. This can be done using regular expression. — Terry, Sep 21 '17 at 15:09
The data is added as text content. Do I need to change from a text box to HTML content instead? — JG7, Sep 21 '17 at 15:15

score 1 · Accepted Answer · answered Sep 21 '17 at 15:24

Thanks everyone! I simply changed textContent to innerHTML and used <br/> as the line breaks as suggested. You have all collectively saved me a lot of manual labor.

Working code:

function ParseCheckBoxes (query, text) {

    if (document.getElementById('myAlertBox') !== null) {
        document.getElementById("myAlertBox").outerHTML='';
    }

    var box = document.createElement( 'div' );
    box.id = 'myAlertBox';

    document.body.appendChild( box );

    box.innerHTML = text + '<br/>';

    var selectedQueries = document.querySelectorAll (query);

    selectedQueries.forEach ( (chkBox) => {
        box.innerHTML += chkBox.title + '<br/>';
    });
}

score 0 · Answer 2 · answered Sep 21 '17 at 15:15

0

HTML will not support \n because it will treated as white space. Use <br/> tag for line break.

var box = document.createElement( 'div' );
box.id = 'myAlertBox';

document.body.appendChild( box );

box.textContent = text + '<br/>';

var selectedQueries = document.querySelectorAll (query);

selectedQueries.forEach ( (chkBox) => {
    box.textContent += chkBox.title + '<br/>';
});

answered Sep 21 '17 at 15:15

Kalaikumar Thangasamy

564
2
8

Unfortunately the data is being added as text to a textbox. This is the result: `06481-CT TECHNOLOGIST
002561-CT TECHNOLOGIST (OP)
` – JG7 Sep 21 '17 at 15:16
if that is the case you should use `textarea` not `textbox`. `textbox` will not support new line. – Kalaikumar Thangasamy Sep 21 '17 at 15:20
For `textarea` you can use `\n` – Kalaikumar Thangasamy Sep 21 '17 at 15:24

Javascript Textbox Copy/Paste Loss of Newline

2 Answers2