javascript - Javascript 中选定文本的节点名称

Question

我正在制作一个 HTML 文本编辑器。为此，我有一个 contenteditable 设置为 true 的 div。为了使所选文本“粗体”，我试图找到所选文本的节点。我应该怎么做，或者有没有其他方法可以实现这个(特别是在 ie 中)。

Answer 1

首先，请注意用户的选择与 DOM 中的节点没有直接关系。考虑这个 HTML 片段:

<p>
    Now <b>is the time</b> for all <u>good men</u>
    to come <i>to the <em>aid</em> of their</i>
    country.
</p>

假设用户的选择从“时间”开始延伸到“国家”结束。至少涉及12个节点:

1. 文本节点的一部分:“时间”
2. <b> 的结束标签节点。
3. 一个文本节点:“for all”
4. 一个完整的<u>节点，有一个子节点:
   • 文本节点“好人”
5. 一个文本节点:“来”
6. 一个完整的<i>节点，带有子节点:
   • 一个文本节点:“到”
   • 一个完整的<em>节点，有一个子节点:
   • • 文本节点:“aid”
   • 一个文本节点:“他们的”
7. 部分文本节点:“country”(注意，完整的文本节点包括句点，但选择不包括。)

所以，你不能真正要求 nodeName，因为这里有很多节点。

但是，您可以问“完全包含用户选择的容器的节点名称是什么，即使它也可能包含未选择的内容？”

如果这是您想知道的，您需要 TextRange.parentElement()方法(仅适用于 IE，其他浏览器将使用 range.commonAncestorContainer 属性)。

例如，在 IE 中:

window.document.selection.createRange().parentElement().nodeName;

如您在问题标题中所述，这将为您提供节点名称。这与您在问题文本中指出的想要将文本加粗不同。如果你想让文本加粗，你可能需要 TextRange.execCommand()方法。

window.document.selection.createRange().execCommand('Bold', false);

这应该使选择变得大胆。 list of possible commands存在。