在div中顯示的格式代碼

我在構建基於UI的基於Javascript的UI，該UI基於UI生成代碼。我的代碼生成工作。代碼保存在一個字符串中。我試着格式化它，縮進它，但我不知道如何。有沒有辦法將代碼格式化？在div中顯示的格式代碼

例如，如果我有這樣的字符串：

"<body><div><h1>Hi</h1></div></body>"

正在輸出是這樣的：

<body> 
    <div> 
    <h1> 
     Hi 
    </h1> 
    </div> 
</body>

現在我outputing這樣的：

$(".output").text(string);

2017-02-17 Niqql

看看在html中的代碼標籤。顯示由代碼標記包裹的字符串

<code>your string</code>

如果你想achived格式化輸出，請看看模板文字

2017-02-17 09:48:07

不是僅用於monospacing的代碼標籤，而不是用於分割或縮進？ – Niqql

@Niqql是的。真正。我的第二個方案有效 –

這將顯示它，但代碼保存在字符串中縮進。顯示不是問題，縮進是。 – Niqql

的.text（）用於更改任何標籤的文本。

$(".output").text(string);

.html（）用於添加帶有標籤的字符串。

$(".output").html(string);

2017-02-17 09:50:10

這將把字符串中的所有元素轉換爲dom-elements，這是不需要的。 – Esko

true，我想顯示爲代碼而不是元素 – Niqql

，那麼你可以嘗試$（「。output」）。text（「" + string + "」）; –

如果要顯示正確縮進和着色的代碼，可以使用庫來做到這一點，例如highlighjs。

我不確定它是否自動縮進，但算法並不那麼難：只需在打開新的html標籤時添加換行符和足夠的空格（遞歸將使這種方式更容易）。您也可以使用js-beautify。

2017-02-17 09:51:01

謝謝，我會讀到這 – Niqql

回答