0

↓確認しました。
getselection contenteditable 特定のdiv内でユーザーが選択した範囲を取得する

下記のようにrange.toString()で選択範囲の文字列を取得できたのですが、HTMLタグも含めて取得するにはどうしたらよいでしょうか?

function onSelectionChange() {
let selection = window.getSelection();
if(selection.rangeCount != 1) {
    return;
}

const range = selection.getRangeAt(0);

if(!range.collapsed){
  document.getElementById('result').textContent = range.toString();
}

}

document.addEventListener('selectionchange', onSelectionChange);
onSelectionChange();
<html>
<body>
<div id="text" contenteditable="true"><b>bold</b> and <i>italic</i></div>
<div id="result"></div>
</body>
</html>

1 件の回答 1

2

getSelection().getRangeAt(0).cloneContents()DocumentFragment ノードが得られます。その子ノードをループして、Element だったら outerHTML を呼ぶ、Text だったら <& をエスケープ、のようにシリアライズしてください。

new XMLSerializer().serializeToString(getSelection().getRangeAt(0).cloneContents()) という手もありますが、こちらは XML としてシリアライズするので xmlns がついたりします。


もし ol が選択されてたら

はい、<b>ol</b>で取得したいです。

選択範囲を document.execCommand('copy', ...) でクリップボードにコピーして、Clipboard API で読み出すという手法が可能かもしれません。
【JavaScript】クリップボードの内容を読み取る方法
読み取る方法はこのページが参考になるかもしれません。

コピーしたくない場合は、簡単な方法はなさそうです。getSelection().getRangeAt(0) で得られた Range オブジェクトの始点と終点の情報から必要なタグやテキストを自力で判定してHTMLソースを組み立てます。そういうことをしてくれるライブラリなどが存在するかもしれませんね。

4
  • 前者の方法で試してみました。 全体を選択した場合、うまくタグも返してくれるようなのですが、 "bold"を選択した場合、なぜかタグが抜けてしまいます。。 Commented 2023年6月9日 14:09
  • 選択範囲にタグが入らないのでそれは想定内です。もし ol が選択されてたら <div><b>ol</b></div> になって欲しいのですか
    – int32_t
    Commented 2023年6月10日 7:42
  • はい、<b>ol</b>で取得したいです。 getSelection()では難しいでしょうか? Commented 2023年6月10日 12:31
  • 回答を更新してみました。
    – int32_t
    Commented 2023年6月11日 23:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。