网站搜索

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

在做一个项目时，我遇到了一个错误，并发现了这种意外的行为：

如果我在字符串上调用 .replace() 并使用 .text() 将结果设置到 div 上，replace 函数的效果会如我预期。

然而，如果我在一个字符串上调用 .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() 可以解决这个问题，但是...

这为什么会发生？

答案＃1

替换工作得很好。

当使用 html 方法时，看起来错误的字符串出现在元素中只是因为 &curren 被浏览器解码为 ¤，所以 &currencyId 显示为 ¤cyId。

当你使用 text 方法时，文本不会被解码为 HTML 代码，因此 .text("&currencyId") 的效果与 .html("&amp;currencyId") 相同。

字符 ¤ 的 HTML 实体是 &curren;，但浏览器也接受不带分号的形式 &curren。

答案＃2

因为 ¤ 是一个 HTML 实体，而 .html 会解析 HTML 实体，而 .text 会保持原样。