javascript - 单个元素中的多个文本节点？

Question

谁能帮我看看下面的截图并解释一下:

1. 发生了什么事？
2. 如何以编程方式检测它？
3. 如何以编程方式修复/摆脱它？

我相信发生的事情是我在单个 pre 元素中有多个文本节点......我觉得我多年前在 MDN 上读到这样的事情是可能的，但我从来没有以前遇到过类似的事情。

jQuery 不会通过 text() 或 html() 显示任何异常(我在控制台中都尝试过，如屏幕截图所示)...它只是显示合并到单个节点中的所有文本节点的内容。

未显示的是，当我尝试通过以下方式在控制台中手动修复此问题时:

$('pre').text($('pre').text())

不是将所有文本节点替换为单个文本节点并将所有 3 个内容合并为一个，它仅将第一个文本节点的内容替换为所有 3 个内容。

所有这些让我很困惑，我找不到任何关于这些的文档，所以如果有人能回答我上面的问题，我将不胜感激。

哦，因为我知道有人会问我是怎么做到的，答案是我不太确定我做了什么。和我的meteor项目的html和js循环有关，我想:

在我的 html 中我有这个:

<pre class="editable" contentEditable="true">{{text}}</pre>

在我的 javascript 中我有这个:

"input pre": function (event) {
    var newText = $(event.target).text();
    Ideas.update(this._id, {$set: {text: newText}});
}

因此 meteor 会自动检查数据库中 text 的更改，并将最新副本放入我的 pre 中。它还会查看用户何时编辑数据库中的 pre 和编辑 text。以某种方式执行此操作，有时会产生您在上图中看到的结果(有时会产生其他奇怪的行为。)

Answer 1

1. What is going on?

pre 元素中有多个文本节点。

2. How can I programmatically detect it?

$('pre').contents() 将返回元素的子元素列表，包括文本节点。在我的例子中，我只会有文本节点，所以只需检查列表的长度是否大于 1 就可以了。如果我不能做出那个假设，我将不得不遍历返回的列表并查看是否有任何两个连续的节点是文本节点。 See the documentation from jQuery.

3. How can I programmatically fix / get rid of it?

$('pre')[0].normalize() 修复了它。 See the documentation on normalize from MDN.