需要使用jQuery或Javascript轉義/>（正斜杠和大於斜杠）

Question

我正在一個將在pre標簽內顯示代碼的網頁上工作，並且需要在這些pre標簽內呈現用於形成HTML標簽的字符。 我可以根據下面的代碼通過jQuery / Javascript轉義大於和小於符號。

但是，正斜杠和大於號（/>）的組合是有問題的。 另外，在頁面運行時，我在最終輸出中得到了更多預期結果。

pre標簽的內容很簡單。

<pre>
    <abc />
    <xyz />
</pre>

這是我的jQuery代碼。

$(function(){
    $('pre').html(function() {
        //this.innerHTML = this.innerHTML.replace(new RegExp(['/>'],"g"), "#");
        //this.innerHTML = this.innerHTML.replace(new RegExp(['/'],"g"), "*");
        this.innerHTML = this.innerHTML.replace(new RegExp(['<'],"g"), "&lt;");
        this.innerHTML = this.innerHTML.replace(new RegExp(['>'],"g"), "&gt;");
    });
});

運行此命令時，我期望的是頁面將呈現以下內容：

<abc/><xyz/>

很簡單 相反，這是在Chrome，Firefox和IE中呈現的內容。

        <abc>
        <xyz>
</xyz></abc>

標簽被復制，並且小於號后的正斜杠被移動。 目前，我正在學習jQuery，因此我的函數可能存在一些更根本的錯誤。 謝謝你的幫助。

Answer 1

您有一些無效的HTML。 然后，瀏覽器嘗試將無效的HTML轉換為DOM。 然后，jQuery要求瀏覽器將DOM轉換回HTML。 它得到的是在那個階段對DOM進行序列化。 原始來源丟失。

您不能使用jQuery恢復HTML文檔的原始損壞源（缺少發出新的HTTP請求並強制其將響應視為純文本）。

在將HTML發送給客戶端之前，請先在服務器上修復HTML。