需要使用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。