Question

我有字符串，我想将此字符串写入innerHTML属性，然后我想比较这两个字符串。基本上我想要这样的东西：

var myString = "&lt;div&gt;my message with accented &#225;&#233; characters&lt;/div&gt;"
var output = document.getElementById("first")
output.innerHTML = myString

然后进行比较

if (output.innerHTML == myString) {
...
}

通过运行此代码，我得到上面字符串的错误结果，因为序列 áé 被转换为áé，因此字符串不匹配。我得到的最接近的结果是使用小hack并创建临时元素写入，然后与从中提取的数据进行比较。它工作正常，但这样做是不对的。

var tmp = document.createElement('div');
tmp.innerHTML = myString

if (output.innerHTML == tmp.innerHTML) {
...
}

所以我的问题是：

有什么方法可以找回我写入innerHTML的确切副本吗？
还是有一种简单的方法来转换数据，所以它们匹配吗？
或者我的黑客只是标准方式如何做这种事情？

要将其置于上下文中，我将生成数据，然后将其转换为JSON。然后通过JSON.parse()在javascript中读取此JSON输出，并将结果插入到各种标记中。我首先检查差异，因为当新数据与旧数据不同时，其他操作也会发生。我也尝试了类似unescape()之类的东西，但它不适用于这种转义。是的，仍然可以选择在Map中存储原始字符串并进行比较。

这里有一些更完整的演示代码，我也放在JSFiddle

上

<div id="first"> </div>
<div id="resultFirst"></div>
<br />
<div id="second"> </div>
<div id="resultSecond"></div>

<script>
var myString = "&lt;div&gt;my message with accented &#225;&#233; characters&lt;/div&gt;"
var output = document.getElementById("first")
var result = document.getElementById("resultFirst")

output.innerHTML = myString
if (output.innerHTML == myString) {
  result.innerText = "TRUE " + myString
} else {
  result.innerText = "FALSE " + myString
}


var output2 = document.getElementById("second")
var result2 = document.getElementById("resultSecond")

var tmp = document.createElement('div');
tmp.innerHTML = myString

output2.innerHTML = myString
if (tmp.innerHTML == output2.innerHTML) {
  result2.innerText = "TRUE " + tmp.innerHTML
} else {
  result2.innerText = "FALSE " + tmp.innerHTML
}
</script>

Answer 1

简短的回答是否定的; HTML只是一个显示层，您不应该依赖它来存储数据，只显示它。

浏览器将对innerHTML执行所需的任何操作以使其可渲染。该字符串只是该元素内DOM结构的表示。因此，一旦将字符串传递给innerHTML，它就会将其转换为实际的DOM元素。检索innerHTML要求浏览器执行相反的操作;将这些节点转换回字符串，但它认为合适。简而言之，innerHTML不是变量，它是一个函数，它实际上并不是“存储”任何东西。

如果您想存储某些内容的精确副本，请不要使用HTML，它只能用于显示。相反，将变量存储在javascript中并将每个元素的id与变量相关联以进行比较。然后，您可以按ID查找这些元素，并将类应用于它们以触发动画。

如果我在innerHTML中写了一些内容，我该如何获得完全的副本？

1 个答案: