Question

我正在使用带有超级简单正则表达式的javascript来替换“＆lt;”使用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属性的方式有关。如果您使用谷歌浏览器，请检查任何＆lt; br /＆gt;使用调试工具标记，你会发现它们没有显示反斜杠。当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>

您的RegEx不是问题。

Answer 2

你的脚本没问题。

如果您尝试这样做：

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

它会正确打印 。

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

Answer 3

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

我没有在小提琴的“结果”窗格中看到 this is some code，而是只看到this is some code而没有标记。

通过添加debugger;语句作为JavaScript窗格中的第一行并对其进行跟踪，向它投掷萤火虫，我发现str的值为'\n'，即，只是从innerHTML返回了换行符而没有别的。

考虑到这一点，但无法确认，我怀疑这是因为Firefox构建DOM树的方式与预期不同，因为您使用的HTML 无效。内联元素不允许包含块元素;具体而言，<code>标记不允许包含标记，<pre>同样不允许包含标记 - 同样，只有有限的内联元素可以在<pre>标记内使用。

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

Answer 4

innerHTML不会返回文字源代码，而是浏览器对其进行解释的结果。

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

并且HTML不会关闭不能包含结束标记的开放标记，因此它们也不包括在内。

为什么使用正则表达式替换javascript字符串会从我的br标记中删除“/”

4 个答案: