text nodeValue包含HTML实体

Question

我正在创建一个实时HTML编辑器，它在渲染DOM后加载，并通过循环遍历所有节点来构建源。 我注意到当我尝试读取包含HTML实体的文本节点的nodeValue时，我总是得到该实体的渲染unicode值。

如何读取呈现的文本节点，并保留HTML实体代码？ （使用香草JS）

例：

<div id="test">copyright &copy;</div>
<script>
var test = document.getElementById('test');
console.log(test.childNodes[0].nodeValue);
// expected: copyright &copy;
// actual: copyright ©
</script>

Answer 1

不幸的是你不能。 Text接口继承自CharacterData ，两个接口仅提供DOMStrings作为返回值，其中包含Unicode字符。

此外，HTML5解析算法基本上完全删除了实体。 这在8.2.4 Tokenization的几个部分中定义。

• 8.2.4.1数据状态：描述＆符号将解析器放入数据状态的Character引用
• 8.2.4.2数据状态中的字符引用描述了应该使用符号后跟的符号。 如果一切正常，它将返回Unicode字符标记，而不是实体！
• 8.2.4.69标记字符引用描述了如何解释&...; （基本上做一些事情，如果一切正常， 请在表格中查找 ）。

因此，当您的解析器完成时，实体已经消失，并且已被Unicode符号替换。 这并不奇怪，因为您也可以根据需要将符号©右侧放入HTML代码中。

但是，您仍然可以撤消该转换：您需要获取该表的副本，并检查文档中的任何字符是否包含其中的条目：

var entityTable = {
  169: "©"
}

function reEntity(character){
  var index = character.charCodeAt(0), name;

  if( index < 127) // ignore ASCII symbols
    return character;

  if( entityTable[index] ) {
    name = entityTable[index];
  } else {
    name = "#"+index;
  }
  return "&"+name+";"
}

这是一项相当繁琐的任务，但由于解析器的行为，您可能必须这样做。 （别忘了检查某人是否已经这样做了）。