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

Question

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

这是怎么回事？
如何以编程方式检测它？
如何以编程方式修复/摆脱它？

我相信发生的事情是我在单个 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

What is going on?

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

How can I programmatically detect it?

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

How can I programmatically fix / get rid of it?

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

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

Multiple Text Nodes in a Single Element?

html

javascript

jquery

normalize

meteor