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替换每个'＆lt;'时和'＆gt;'到'＆amp; lt;'和'＆amp; gt;'分别由浏览器（在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>中{1}}。

我使用的转换发生在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并将其放回。

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

1 个答案: