javascript - 在 javascript 中显示带标记的字符串

Question

我有一个具有以下格式的字符串:

" Data\r\n  more data <DIV> "

我想精确地显示该字符串，包括前导空格和换行符。

" Data
   more data <DIV> "

我目前正在使用 jquery 来显示此内容

$("<small class='text-success'></small>").text(theString)

这可以很好地编码要显示的任何 HTML 元素，但不适用于前导空格或换行符。

我尝试用不间断空格替换空格，但文本方法也对其进行编码。

有没有办法在不手动编码整个字符串的情况下做到这一点？

Answer 1

This nicely encodes any HTML elements to display but doesn't work for the leading spaces or line breaks.

为此，您需要使用 white-space CSS 属性的值为 pre、preline 或 pre-wrap(但可能只是 pre)。理想情况下，通过给它一个应用样式的类来做到这一点:

CSS:

.preformatted {
    white-space: pre;
}

然后

$("<small class='text-success preformatted'></small>").text(theString)

示例:

var theString = " Data\r\n  more data <DIV> ";
$("<small class='text-success preformatted'></small>").text(theString).appendTo(document.body);

.preformatted {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但如果有必要，您可以内联完成:

$("<small class='text-success'></small>").css("white-space", "pre").text(theString)

示例:

var theString = " Data\r\n  more data <DIV> ";
$("<small class='text-success'></small>").css("white-space", "pre").text(theString).appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>