javascript - How to include newlines in jQuery text() - Stack Overflow

admin管理员组

文章数量:1134246

I want to be able to say

$(someElem).text('this\n has\n newlines);

and it renders with newlines in the browser. The only workaround I have found is to set the css property 'white-space' to 'pre' on someElem. This almost works, but then I have an annoyingly large padding between the text and the top of someElem, even when I set padding to 0. Is there a way to get rid of this?

I want to be able to say

$(someElem).text('this\n has\n newlines);

and it renders with newlines in the browser. The only workaround I have found is to set the css property 'white-space' to 'pre' on someElem. This almost works, but then I have an annoyingly large padding between the text and the top of someElem, even when I set padding to 0. Is there a way to get rid of this?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 11, 2023 at 14:02 TylerH 21.2k7676 gold badges7979 silver badges110110 bronze badges asked Dec 26, 2010 at 23:41 Joe ArmstrongJoe Armstrong 1,59922 gold badges1010 silver badges55 bronze badges 3

• 3 wrapping it with <pre> tags (and using .html() instead of .text()) is the easiest and best solution for maintaining line breaks from a text file or from plain text in my opinion (this is suggested by Karim's answer below). HOWEVER: The newer alternative to this is to use white-space: pre-wrap; as suggested in cleong's answer – edwardtyl Commented Jul 24, 2015 at 17:09
• 2 why not use append() instead of test() and <br/> instead of \n ? like this - $(someElem).append("this <br/> has <br/> newlines"); – Erfan Ahmed Commented Jun 11, 2018 at 4:07
• Possible duplicate here: stackoverflow.com/q/18071164/1066234 – Avatar Commented Jun 23, 2023 at 15:02

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 162

The correct solution at this point is to use CSS white-space: pre-line or white-space: pre-wrap. Clean and elegant. The lowest version of IE that supports the pair is 8.

https://css-tricks.com/almanac/properties/w/whitespace/

You may need to manually trim off initial and/or trailing white-spaces.

If you store the jQuery object in a variable you can do this:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

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

If you prefer, you can also create a function to do this with a simple call, just like jQuery.text() does:

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

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

Here is what I use:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Alternatively, try using .html and then wrap with <pre> tags:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

You can use html instead of text and replace each occurrence of \n with <br>. You will have to correctly escape your text though.

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Try this:

$(someElem).html('this<br> has<br> newlines);

I would suggest to work with the someElem element directly, as replacements with .html() would replace other HTML tags within the string as well.

Here is my function:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

Call it by:

someElem = nl2br(someElem);

For me it works when using jquerys .html() function instead of .text() function. Then you can add <br/> for linebreaks.

var msg = someString + "<br/>" + anotherString;
$(elem).html(msg);

本文标签： javascriptHow to include newlines in jQuery text()Stack Overflow