为什么使用 .html() 会破坏这个 Replace 表达式？

Question

在一个项目中，我遇到了一个bug并发现了这个意外行为：

如果我对一个字符串调用.replace()方法并将结果使用.text()方法赋给div，那么替换功能会如我所期望的工作。

然而，如果我对一个字符串调用.replace()方法并将结果使用.html()方法赋给div，那么目标文本不会在字符串中被替换。

下面是一个例子：

 $('#result1').text('¤cyId'.replace('¤cyId','&currencyId')); // works
 $('#result2').html('¤cyId'.replace('¤cyId','&currencyId')); // doesnt work 

    var result = '¤cyId'.replace('¤cyId','&currencyId')
 $('#result3').text(result); // works
 $('#result4').html(result); // doesnt work 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result1"></div><br>
<div id="result2"></div><br>
<div id="result3"></div><br>
<div id="result4"></div>

我发现使用 .text() 而不是 .html() 可以解决这个问题，但是...

为什么会出现这种情况呢？

- Wesley Smith

---

“the targeted text is not replaced in the string” - 不，目标文本已经被替换了。问题出在将结果视为HTML时发生的。 - nnnnnn

Answer 1

替换功能运行良好。 当您使用html方法时，似乎错误的字符串出现在元素中，因为浏览器将&curren解码为¤，所以&currencyId显示为¤cyId。当您使用text方法时，文本不会被解码为HTML代码，因此.text("&currencyId")与.html("&currencyId")具有相同的效果。 ¤字符的HTML实体是¤，但浏览器也接受没有分号的形式&curren。

- Guffa

---

啊，我从没想过“浏览器也接受没有分号的表单实体‘&curren’”。谢谢！ - Wesley Smith

Answer 2

因为 &curren 是一个 HTML 实体，而 .html 会解析 HTML 实体，而 .text 则保留它们原样。

- sahbeewah

---

所以明确一点，.replace() 语句每次都起作用。 - nnnnnn

Answer 3

尝试

$('#result2').html('¤cyId'.replace('¤cyId','&currencyId'));

在html中，& 应该被写成 &。

- galchen