Webページにおいて、選択して(反転して)いる部分を、オブジェクトとして取り出すことができる。
--
<script>
$obj = document.getSelection();
</script>
--
文字を取り出すことを明示して、アラートに表示してみる。
--
alert($obj.toString());
--
getSelection()では、ノード(節)が4つ設定されている。
--
$obj.anchorNode
$obj.baseNode・・・anchorNodeのエイリアス(別名)
$obj.focusNode
$obj.extentNode・・・focusNodeのエイリアス(別名)
--
ところが、上記のNodeの内容が、Microsoft EdgeとIEでは、相変わらず無茶苦茶であり、しかもEdgeとIEで異なる。
Windows10+ChromeとiPhone5c+iOS10.3.2+safariは同じ挙動で、内容も納得できる。とりあえず、こちらで説明を進めていくことにする。
下記のHTMLにおいて、選択範囲またはカーソルの位置により、$obj.anchorNode.wholeTextと$obj.focusNode.wholeTextの変化を追ってみた。
--
<div>あい<b>うえ</b>おん</div>
--
結論を先に言えば、anchorNodeは始点を含むノード、focusNodeは終点を含むノードと言うことである。ノードの区切りにカーソルがある場合は、前方のノードが優先されている。
(1)「うえ」選択
○操作
・「うえ」を太字にしたあと、選択されたまま。
・選択を一旦外し、
・ダブルクリックで「うえ」選択
・「う」→「え」で「うえ」選択
・「う」←「え」で「うえ」選択
○選択範囲:うえ
○anchorNode:うえ
○focusNode:うえ
(2)「|あ」
※|はカーソルの位置。文字は選択しない。
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい
(3)「あ|い」
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい
(4)「い|う」
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい
(5)「う|え」
○選択範囲:(無し)
○anchorNode:うえ
○focusNode:うえ
(6)「え|お」
○選択範囲:(無し)
○anchorNode:うえ
○focusNode:うえ
(7)「お|ん」
○選択範囲:(無し)
○anchorNode:おん
○focusNode:おん
(8)「ん|」
○選択範囲:(無し)
○anchorNode:おん
○focusNode:おん
(9)「あいうえおん」選択
○操作
・トリプルクリックで選択
・「あ」→「ん」で選択
○選択範囲:あいうえおん
○anchorNode:あい
○focusNode:おん
(10)「あいうえおん」選択
○操作
・「あ」←「ん」で選択
○選択範囲:あいうえおん
○anchorNode:おん
○focusNode:あい
(11)「い→う」で「いう」選択
○選択範囲:いう
○anchorNode:あい
○focusNode:うえ
(12)「い←う」で「いう」選択
○選択範囲:いう
○anchorNode:うえ
○focusNode:あい
(13)「え→お」で「えお」選択
○選択範囲:えお
○anchorNode:うえ
○focusNode:おん
(14)「え←お」で「えお」選択
○選択範囲:えお
○anchorNode:おん
○focusNode:うえ
[引用]
javascript - What is anchorNode , baseNode , extentNode and focusNode in the object returned by document.getSelection? - Stack
https://stackoverflow.com/questions/27241281/what-is-anchornode-basenode-extentnode-and-focusnode-in-the-object-returned