在javascript中顯示帶有標記的字符串

Question

我有以下格式的字符串：

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

我想顯示此字符串，包括前導空格和換行符。

" Data
   more data <DIV> "

我目前正在使用jQuery來顯示這樣的

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

這很好地編碼了要顯示的所有HTML元素，但不適用於前導空格或換行符。

我嘗試用不間斷空格替換空格，但是text方法也將其編碼。

有沒有一種方法，而無需手動編碼整個字符串？

Answer 1

這很好地編碼了要顯示的所有HTML元素，但不適用於前導空格或換行符。

要做到這一點，你要使用的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> 

Answer 2

您可以使用模板文字直接使用確切的字符串

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

Answer 3

您可以嘗試將"\\r\\n"替換為"<br/>" 。 那應該行得通。