如何在 PRE 标记中保留原始 XML/HTML 及其格式

Question

当我在我网站的某个博客文章上选择“查看页面源代码”时，我看到了正确的结果：

<variable name="myPublicVar" type="String">
  <metadata name="MemberMetaExamplePublic" />
</variable>
<accessor name="myAccessor" access="readwrite" type="Boolean" declaredBy="MetadataTest">
  <metadata name="MemberMetaExampleGetter" />
</accessor>
<method name="myMethod" declaredBy="MetadataTest" returnType="void">
  <metadata name="MemberMetaExampleMethod" />
</method>
<metadata name="CustomMeta">
  <arg key="param1" value="foo" />
  <arg key="param2" value="bar "/>
</metadata>

但是当我使用 jQuery 将每个 '' 替换为 '<'和'>'分别，浏览器（在 Chrome 中）渲染的结果会弄乱自闭合元素：

<variable name="myPublicVar" type="String">
  <metadata name="MemberMetaExamplePublic">
</metadata></variable>
<accessor name="myAccessor" access="readwrite" type="Boolean" declaredby="MetadataTest">
  <metadata name="MemberMetaExampleGetter">
</metadata></accessor>
<method name="myMethod" declaredby="MetadataTest" returntype="void">
  <metadata name="MemberMetaExampleMethod">
</metadata></method>
<metadata name="CustomMeta">
  <arg key="param1" value="foo">
  <arg key="param2" value="bar ">
</arg></arg></metadata>

请注意<metadata> 元素如何不必要地生成结束标记，以及最后一个中的两个<arg> 元素如何错误地生成实际上将一个<arg> 包裹到另一个<arg> 的结束标记。

我使用的转换发生在这段 jQuery / JavaScript 代码中：

$('pre.raw').each( function(pIndex, pDIV) {
  pDIV.innerHTML = pDIV.innerHTML.replace(/\</g, "&lt;").replace(/\>/g, "&gt;");
});

可以做些什么来阻止代码被解析？我不确定是浏览器的问题，jQuery 还是 JavaScript？

注意：虽然我在 Wordpress 中遇到了这个问题，我可以在 wordpress.stackexchange.com 网站上提出这个问题，但我认为这是一个普遍的问题，可以在各种 Web 开发场景中找到。

Answer 1

首先将字符转义将它们添加到文档中。不要要求浏览器从无效的 HTML 生成 DOM，然后从生成的 DOM 生成 HTML，然后尝试修复 HTML 并将其放回原处。