如何将格式化的字符串从console.log显示到html div

Question

Say I have a formatted string str written in my backend java code like this :

name    : xxx       company : qwe
address : yyy       age     : asd
country : zzz       

now I managed to display it on the browser console via

console.log(str);

and when I checked it is also formatted just the way it is

name    : xxx       company : qwe
address : yyy       age     : asd
country : zzz        

but when I use Jquery to show it in a div in my html file, say for example

$('.divclass').text(str);

it will just be one line

name    : xxx       company : qweaddress : yyy       age     : asdcountry : zzz

this is all expected, but I was wondering if there is an implementation where I could possibly display the console.log to my html tag and still keep the format that I had before, instead of having to format it again, I guess my question is if there is a way to present console.log to the html in my case.

Answer 1

You can either use the <pre> -tag or (recommended): You can replace every \\n in the string with <br /> .

str = str.replace("\n", "<br />");

You have to do that, because web browsers don't display normal line-breaks by themselves. You either have to use the <br /> -tag or a special tag like <pre> .

Answer 2

Just replace \\n with <br> and put the string (wrapped into the <pre> tag) in the div as inner html.

 var str = "name : xxx company : qwe\\n"+ "address : yyy age : asd\\n"+ "country : zzz \\n"; console.log(str); str = str.replace(/\\n/g, "<br>"); $(".divclass").html("<pre>"+str+"</pre>"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="divclass"> </div>