为什么使用正则表达式进行 javascript 字符串替换会删除“/”来自我的 br 标签

Question

我使用 javascript 和一个超级简单的正则表达式来替换“<”及其 HTML 字符代码，这样我就可以使用 pre 和 code 标签在我的网站上放置一些代码并自动完成。

”

基本上我想弄清楚为什么这个js代码：

var str = document.getElementById("cleanme").innerHTML;
str=str.replace(/</g,"&lt;");
document.getElementById("cleanme").innerHTML = str;  

删除“/ 在 br 标签中

<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>

没什么大不了的，因为我只是显示代码，但我仍然想知道。

它输出这个：

<p><br>this is some code</p>

谢谢

Answer 1

我相信这与某些浏览器返回innerHTML 属性的方式有关。如果您使用 Google Chrome，请检查任何 << br/>使用调试工具标记，您会发现它们不显示反斜杠。当Chrome返回innerHTML属性时也是如此，黑斜杠被去掉。

因此，当您传入：

<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>

浏览器返回一个 innerHTML 属性：

<pre><code id="cleanme">
<p><br>this is some code</p>
</code></pre>

您的正则表达式不是问题。

Answer 2

你的脚本没问题。

如果您尝试这样做：

var str = '<p><br />this is some code</p>';
str=str.replace(/</g,"<");
str=str.replace(/>/g,">");
document.getElementById("cleanme").innerHTML = str;

它将正确打印
。

可能是浏览器 HTML 规范化的影响。

Answer 3

也许为时已晚，无法帮助您，并且您已经接受了正确的答案，但还有另一个潜在的大问题。
我在 Linux 上的 Firefox 3.6.11 和 Windows 上的 Firefox 3.6.12 上进行了尝试，它们的行为相同 --

我没有看到

这是一些代码

在你的小提琴的结果窗格中，相反，我只看到这是一些代码，根本没有标记。

通过添加 debugger; 语句作为 JavaScript 窗格中的第一行并跟踪它来向其抛出 firebug，我发现 str 正在获取 ' 值\n'，也就是说，仅从 innerHTML 返回换行符，没有其他任何内容。

考虑到这一点，但无法确认这一点，我怀疑这是因为 Firefox 构建 DOM 树的方式与您期望的不同，因为您使用的 HTML 无效。行内元素不允许包含块元素；具体来说， 标签不允许包含

标签，并且

 也同样不允许包含 
 标记 - 同样，在 
 标记内只能使用有限的内联元素。

我认为 FF 在打开段落之前隐式关闭代码块，因此 id="cleanme" 的innerHTML只不过是换行符。它按照您的预期使用“pre”字体呈现，因为您已将浏览器置于 Quirks 模式。

Answer 4

innerHTML 不返回文字源代码，而是返回浏览器解释它的结果。

不同的浏览器将为innerHTML返回非常不同的结果，有时会省略一些引号和“可选”结束标签，将一些标签名称和属性大写，并折叠额外的空格。

HTML 不会关闭不能有结束标签的开放标签，因此它们也不被包含在内。