jQuery text and newlines

Question

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

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

$.fn.multiline = function(text){_x000D_
    this.text(text);_x000D_
    this.html(this.html().replace(/\n/g,'<br/>'));_x000D_
    return this;_x000D_
}_x000D_
_x000D_
// Now you can do this:_x000D_
$("#example").multiline('this\n has\n newlines');

_x000D_

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

_x000D_

User · Answer

You can use  html instead of text and replace each occurrence of  n with  lt br gt   You will have to correctly escape your text though   x   x replace   amp  g    amp amp          replace   gt  g    amp gt          replace   lt  g    amp lt          replace   n g    lt br gt

User · Answer

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  lt  lines length   i          if  i  gt  0    el  append   lt br gt           el  append document createTextNode lines i           return el      Call it by   someElem   nl2br someElem

User · Answer

Using the CSS white-space property is probably the best solution  Use Firebug or Chrome Developer Tools to identify the source of the extra padding you were seeing

User · Answer

Alternatively  try using  html and then wrap with  lt pre gt  tags     someElem  html  this n has n newlines   wrap   lt pre   gt

User · Answer

Here is what I use   function htmlForTextWithEmbeddedNewlines text        var htmls           var lines   text split   n           The temporary  lt div  gt  is to perform HTML entity encoding reliably                document createElement   is  much  faster than jQuery   lt div gt  lt  div gt           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  lt  lines length   i              htmls push tmpDiv text lines i   html               return htmls join   lt br gt       jQuery   div   html htmlForTextWithEmbeddedNewlines  hello nworld

User · Answer

It s the year 2015  The correct answer to this question 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   P S  Until CSS3 become common you d probably need to manually trim off initial and or trailing white-spaces

User · Answer

Try this     someElem  html  this lt br gt  has lt br gt  newlines

[javascript] jQuery text() and newlines

Examples related to javascript

Examples related to jquery

Examples related to html