用於Javascript中選定文本的nodeName

Question

我正在製作HTML文本編輯器。 爲此，我有一個div contenteditable設置爲true。 爲了使選定的文本「粗體」，我試圖找到所選文本的節點。 我應該怎麼做，或者有什麼其他的方式來實現這個（特別是在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. 部分：一<b>節點「時間」
2. 結束標記。
3. 文本節點：「所有的」
4. 完整<u>節點，一個子節點：
   • 文本節點「好男人」
5. 文本節點：「來」
6. 完整<i>節點，子節點：
   • 文本節點： 「到」
   • 完整<em>節點，一個子節點：
   • • 文本節點： 「援助」
   • 文本節點：
7. 部分文本節點的 「他們」： 「國家」 （注意，完整的文本節點包含句點，但選擇不包含）。

因此，您不能真正要求nodeName，因爲這裏有很多節點。

你可以，但是，問「什麼是完全封閉了用戶的選擇，即使它可能還附上未選擇的東西的容器的節點名稱？」

如果這是你想知道的，你需要TextRange.parentElement()方法（僅適用於IE，其他瀏覽器將使用range.commonAncestorContainer屬性）。

例如，在IE：

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

，讓你的節點名稱，當你在你的問題標題狀態。這與您希望將文本設爲粗體不同，您在問題文本中指出了這一點。如果您想將文字加粗，您可能需要TextRange.execCommand()方法。

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

而這應該使選擇大膽。 A list of possible commands存在。

Answer 2

這將返回節點名稱爲你但是你決定要選擇的文本：

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