Javascript HTML轉義，但保留線條

Question

我寫了一個小的jQuery腳本來幫助我構建一個styleguide。該腳本用於複製和轉義一段HTML並將其打印爲文檔。然而，我的問題是在html中排除了換行符。我喜歡將我的轉義HTML格式化，就像我輸入的那樣。這怎麼可能？

$('.documentation-element').each(function() { 
    var HTML = $(this).html(); 
    $(this).next().find('code').text(HTML).html(); 
}); 

查看完整的例子在這裏： http://jsfiddle.net/tolborg/nr7fs/

Answer 1

您使用的是<code>標籤，但不保留換行符。你需要一個<pre>標籤。所以，換你<code>標籤<pre>標籤內，你的代碼應工作按原樣 - 除了你不需要額外的.html()末（它不會傷害任何東西，它只是不做什麼）：

$('.documentation-element').each(function() { 
    var HTML = $(this).html(); 
    $(this).next().find('code').text(HTML); 
}); 

這是updated fiddle。

您可能還想調整每行上的前導空白，但是您想要的內容取決於您想要的輸出。

例如，here's a version that strips leading whitespace並在開始和結束消除了額外的新行：

$('.documentation-element').each(function() { 
    var HTML = $(this).html().trim().replace(/\n\s+/, '\n'); 
    $(this).next().find('code').text(HTML); 
}); 

Answer 2

更改text()方法html()：

$(this).next().find('code').html(HTML); 

JSFiddle