将包含换行符和制表符的JavaScript字符串添加到HTML元素

Question

I have this HTML:

<p id="element">Waiting for Message</p>

And this string from the server using JSON.stringify() with breaks and tabs in it ie

var = "Heading (info:info) \n info: \n \t and so on "; // The actual string is more complex though, just an example

And this Jquery to post the string to the paragraph tag:

$("#element").text(data); // data is the string from the server(not in JSON!)

The problem is the HTML ignores the formatting but when I use an alert box it displays with the proper formatting. I am dynamically updating the element as data comes from the server. Any pointers?

Answer 1

You should tell browser to respect those whitepaces. Easy way to do it is using white-space: pre rule:

 var data = "Heading (info:info) \\n info: \\n \\t and so on "; $("#element").html(data); 

 #element { white-space: pre; } 

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

Answer 2

Make use of the pre tag in HTML and update your text there

 $(document).ready(function(){ var data = { "id": "1", "nome": "erwrw", "cognome": "sdsfdfs", "CF": "qwert", "eta": "27", "sesso": "uomo", "indirizzo": "qwerrt", "luogo": "wewrw", "provincia": "ewrewrw", "citta": "erwrwr", "comune": "ewrewrw" } var obj = JSON.stringify(data, null, 4); $('#element').text(obj); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="element">Waiting for Message</pre> <button id="btn">send</button> 

Answer 3

$("#element").html(data.replace(/(\n)/g, '<br>'));