Jquery Text() and Newlines

Line break not working with jQuery .text()

Whitespace means nothing in HTML. You need to either use <br/> and set the .html(), or you need to add a white-space: pre to your dataList <p> tag. Using pre or pre-wrap will respect whitespace (and therefore \n characters)

How to keep line breaks when using .text() method for jQuery?

You don't need to worry about the HTML entities nor any complex string replacing.

All you need is a little CSS:

#target {
    white-space: pre;
}

and use the .text() approach:

(function(){
    var srcText = $("#src").text().trim();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i];
        $("#target").text(result);

    }, 150); // the period between every character and next one, in milliseonds.
})();

http://jsfiddle.net/mattball/vsb9F/

jquery text(), interpretbr as new line

.text() is plain text without formatting. It is literally the concatenation of the text nodes without any other HTML codes (including new lines which are represented by <br> or <p> tags, not by newlines).

.html() is the exact HTML of a container tag.

If you use this, it will get you an approximation of your text with new lines:

var item = document.getElementById("id");
var text = item.innerText || item.textContent;

It's looking at both .textContent and .innerText due to browser compatibility issues.

See http://jsfiddle.net/jfriend00/Xs5P3/ for a working demo.

A Google search for "HTML to text conversion" gives a lot of options to investigate.

Keep line breaks with jQuery .text() in textarea

1. To get line breaks use $(this).html() instead of $(this).text().

2. To use the line breaks inside the textarea replace the <br> with which is the ASCII equivalent.

This line:

var currval = $(this).text().replace(/\r?\n/g, '<br />');

Should be:

var currval = $(this).html().replace(/<br> ?/g, '
');

Updated JSFiddle

How to add new line in jQuery function text()

Change .text to .html and use <br> element, it inserts a line break:

detailsDiv.html("UserName: "+userName+"<br>ID: "+ID+"<br>Email: "+Email+"<br>Dish: "+Dish);
//                                      ^^            ^^                  ^^

If you are writing XHTML, then the <br> tag must be closed, like this <br />:

detailsDiv.html("UserName: "+userName+"<br />ID: //...

Adding new line in JQuery

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.

How to write newline using jquery?

  $('#divId').html("<pre>" + result + "</pre>");

---

Related Topics