Javascript中所选文本的nodeName

Question

我正在制作HTML文本编辑器。 为此，我有一个满足contenteditable设置为真的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. 文本节点的一部分：“time”
2. <b>节点的结束标记。
3. 文本节点：“for all”
4. 一个完整的<u>节点，带有一个子节点：
   • 文本节点“好人”
5. 文字节点：“来”
6. 一个完整的<i>节点，带有子节点：
   • 文本节点：“到”
   • 一个完整的<em>节点，带有子节点：
   • • 文字节点：“援助”
   • 文字节点：“他们的”
7. 文本节点的一部分：“country”（注意，完整的文本节点包含句点，但选择不包括。）

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

但是，您可以询问“完全包含用户选择的容器的nod​​eName是什么，即使它也可能包含未选中的内容？”

如果您想知道这一点，则需要TextRange.parentElement()方法（仅限IE，其他浏览器将使用range.commonAncestorContainer属性）。

例如，在IE中：

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

这会让你获得nodeName，就像你在问题标题中所说的那样。这与您希望在文本中指明的文本粗体不同。如果您想使文本变为粗体，您可能需要TextRange.execCommand()方法。

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

这应该使选择变得粗体。存在list of possible commands。

Answer 2

这将为您返回nodeName，但您决定获取所选文本：

$("your-selector-here").context.nodeName;