マウスでウェブページの一部を選択できます。
現在選択されているテキスト を取得できることはわかっていますが、現在の選択の開始または終了を含むDOM要素を取得するにはどうすればよいですか?
IEではdocument.selection.createRange()。parentElement()を使用し、実際のブラウザではwindow.getSelection()。getRangeAt(0).startContainer.parentNodeを使用します。このようなもの:
function getSelectedNode()
{
if (document.selection)
return document.selection.createRange().parentElement();
else
{
var selection = window.getSelection();
if (selection.rangeCount > 0)
return selection.getRangeAt(0).startContainer.parentNode;
}
}
次の例では、現在の選択範囲の開始境界または終了境界のコンテナーelementを返します。ブールisStart
を使用して、開始境界と終了境界のどちらが必要かを指定します。ほとんどの主流のブラウザで動作します。堅牢性を高めるために機能テストを追加します。
function getSelectionBoundaryElement(isStart) {
var range, sel, container;
if (document.selection) {
range = document.selection.createRange();
range.collapse(isStart);
return range.parentElement();
} else {
sel = window.getSelection();
if (sel.getRangeAt) {
if (sel.rangeCount > 0) {
range = sel.getRangeAt(0);
}
} else {
// Old WebKit
range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
// Handle the case when the selection was selected backwards (from the end to the start in the document)
if (range.collapsed !== sel.isCollapsed) {
range.setStart(sel.focusNode, sel.focusOffset);
range.setEnd(sel.anchorNode, sel.anchorOffset);
}
}
if (range) {
container = range[isStart ? "startContainer" : "endContainer"];
// Check if the container is a text node and return its parent if so
return container.nodeType === 3 ? container.parentNode : container;
}
}
}