JQuery text () and newlines

Question

I want to say

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

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

Answer 1

This is the year 2015. The correct answer to this question at the moment is to use empty white-space: pre-line CSS white-space: pre-line or white-space: pre-wrap . Clean and elegant. The lowest version of IE that supports a pair is 8.

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

PS Until CSS3 becomes ordinary, you probably have to manually trim the leading and / or trailing spaces.

Answer 2

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 for 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> 

Answer 3

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")); 

Answer 4

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

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

Answer 5

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

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

Answer 6

I would suggest working with someElem directly, since replacements with .html() also replace other HTML tags inside the string.

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 by:

 someElem = nl2br(someElem); 

Answer 7

Using CSS white space property is probably the best solution. Use Firebug or the Chrome Developer Tools to determine the source of the add-on you've seen.

Answer 8

Try this:

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

Answer 9

I have Java source code that I request using ajax POST and I want to display the contents of this file as a block of html code having 2 features- 1. line number followed by a line of code 2. java highlighting I want to see what Java code looks like on sublime / eclipse.

My answer is an array of lines of source code.