如何显示从 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

这都是预料之中的，但我想知道是否有一个实现可以在我的 html 标签中显示 console.log 并仍然保持我以前的格式，而不是不得不再次格式化，我想我的问题是在我的情况下是否有办法将 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>

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

how to display formatted String from console.log to an html div

html

javascript

console.log