Adding new line in JQuery

Question

I am looping trough a table with jquery, and trying to get the text from TD's. Once I have the TD values, I'm concatenating them into a single text:

table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            order_num = $tds.eq(1).text(),
            row_id = $tds.eq(2).text(),
            accnt_id = $tds.eq(3).text(),
            status_cd = $tds.eq(4).text(),
            sub_status = $tds.eq(5).text();

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+""+status_cd+"   "+sub_status;
    });

    $("#dialog").text(row);
    $("#dialog").dialog("open");
    copyToClipboard(row);

The problem is, that I am not able to add new line to the end of each tr line. I've tried the following but non of them was successful:

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

row = row+"\u000A"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

When I add the text to the dialogue or to clipboard, the new line is missing, and all I have is a text snake. Dou you have any idea how to properly add a new line to the text in JQuery? Thanks

don't know about the clipboard, but if you're inserting row into a DOM element as you're doing with the line $("#dialog").text(row); you should add <br> — mmgross
– mmgross, Commented Mar 7, 2016 at 10:43
either that or add the text to a <pre>...</pre> block (in your example <pre id="dialog">...</pre>) — geert3
– geert3, Commented Mar 7, 2016 at 10:46
When you use markup like br use html() instead of text() — sabithpocker
– sabithpocker, Commented Mar 7, 2016 at 10:47

sabithpocker · Accepted Answer · 2016-03-07 11:10:14Z

2

By default HTML Elements(except pre,code) collapse white-space(collapse to one) and line breaks. You have to use <br> to have line breaks.

You can replace line breaks to <br> just for display.

var text = "my line1 \nMyline 2";
$('#dialog').html(text.replace("\n", "<br>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dialog"></div>

You can also use white-space CSS to make your element show pre-formatted text.

var text = "My line1\nMyline2";
$('#dialog')
  .css({'white-space': 'pre'})
  .text(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

The approach that you should follow depends on what you are trying to accomplish.

answered Mar 7, 2016 at 11:10

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lázár Antal Over a year ago

Hi! Thanks for the advice. Similarly to the above solution this works only for the dialog text formating. The new lines are still missing from the clipboard text. Here is my copyToClipboard method: function copyToClipboard(element) { var $temp = $("<input>") $("body").append($temp); $temp.val(element.join("\n")).select(); document.execCommand("copy"); $temp.remove(); }

toomanyredirects · Accepted Answer · 2016-03-07 10:49:53Z

0

I think you should be trying to add <br />, not \n to generate a new line. That will probably help.

As you're also copying to the clipboard, you should probably store the rows as an array, which you join with <br /> for the dialog box, but \n for the clipboard.

You could also look at simplifying your code a little; if you're just getting the text from all the individual TDs, you can use the Node.textContent method instead on the TR (documentation). This may yield unexpected results though depending on the white space, so sticking with TDs still may be a better option.

Also take a look at using method chaining in your jQuery code, so you're not using two lines to write the $('#dialog') code.

For example:

var rowContent = [];
table.find('tr').each(function(i) {
  rowContent.push($(this).get(0).textContent);
});

$('#dialog').html(rowContent.join('<br />')).dialog('open');
copyToClipboard(rowContent.join("\n"));

N.B. This is untested as at the time of writing I do not have the HTML for your table.

answered Mar 7, 2016 at 10:49

toomanyredirects

2,00216 silver badges23 bronze badges

3 Comments

Lázár Antal Over a year ago

Thanks for the advice, however it solves only half of the problem. I am now able to properly format the text inside the dialog, but the text copied to the clipboard is still missing the new lines. Here is my copyToClipboard code. Any idea on what is going wrong? function copyToClipboard(element) { var $temp = $("<input>") $("body").append($temp); $temp.val(element.join("\n")).select(); document.execCommand("copy"); $temp.remove(); }

toomanyredirects Over a year ago

@LázárAntal try changing it to start $('textarea') instead of $('input') - HTML inputs are for single lines of text and strip out line breaks.

Gloria Chen Over a year ago

It does not work.

Lázár Antal · Accepted Answer · 2016-03-07 13:40:59Z

0

Problem solved.

This is the method I've used for pushing the text to the clipboard

function copyToClipboard(element) {
            var $temp = $("<input>")
            $("body").append($temp);
            $temp.val(element.join("\n")).select();
            document.execCommand("copy");
            $temp.remove();
        }

Changing the input to textarea solved my problem, the text was inserted to the clipboard with the new lines in place. Hopefully it can be useful for others as well.

answered Mar 7, 2016 at 13:40

Lázár Antal

131 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

Adding new line in JQuery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related