如何将来自console.log的格式化字符串显示为html div

Question

假设我的后端java代码中写了一个格式化的字符串str，如下所示：

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

现在我设法通过

在浏览器控制台上显示它

console.log(str);

当我检查时，它的格式也就是

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

但是当我使用Jquery在我的html文件中的div中显示它时，例如

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

它只是一行

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

这是所有预期的，但我想知道是否有一个实现，我可以将console.log显示到我的html标签，并保持我以前的格式，而不是必须再次格式化，我猜我的问题是，如果有办法在我的情况下将console.log呈现给html。

Answer 1

您可以使用<pre> - 代码或（推荐）：您可以使用\n替换字符串中的每个<br />。

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

您必须这样做，因为网络浏览器不会自己显示正常的换行符。您必须使用<br /> - 代码或<pre>等特殊代码。

Answer 2

只需将\n替换为<br>，然后将字符串（包含在<pre>标记中）放入div作为内部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>