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

Question

我有一个字符串格式如下：

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

我想要显示这个字符串，包括前导空格和换行符。

" Data
   more data <DIV> "

我目前正在使用jquery来显示这个

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

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

我尝试用非破坏空格替换空格，但是文本方法也对它进行了编码。

有没有办法在不手动编码整个字符串的情况下执行此操作？

Answer 1

  

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

为此，您需要使用white-space CSS属性，其值为resolve，pre或preline（但可能只是{{} 1}}）。理想情况下，通过给它一个类来应用样式来实现：

CSS：

pre-wrap

然后

pre

示例：

＆＃13;

＆＃13;

.preformatted {
    white-space: pre;
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是如果有必要，你可以内联：

.preformatted {
  white-space: pre;
}

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用模板文字来使用精确的字符串

var string= `Data
             more data <DIV>`;

Answer 3

您可以尝试将"\r\n"替换为"<br/>"。这应该会有效。