タグ要素を壊さずに、選択したテキストをスパンで囲んだままにする方法（javascript）
1つの例：
元のテキスト：
<p> a foo </p>
<p> another bar </p>
選択：
フォアバー_o
anoth
HTMLのネスト構造を壊したくない：
<p> a fo<span>o </p>
<p> anoth</span>er bar </p>
私はこのようなものが必要です：
<p> a fo<span>o </span></p>
<p> <span>anoth</span>er bar </p>
不可能です。これを想像してください：
<p> a foo </p>
<p> another bar </p>
その結果：
フー
・アナザー・バー
ユーザーが一部のみを選択した場合、次のように言いましょう。
前のバーo
anoth
あなたはhtmlのネスト構造を壊します：
<p> a fo<span>o </p>
<p> anoth</span>er bar </p>
これは、1 つのタグだけでは実現できません。
選択したテキストの各文字を繰り返し処理し、文字が存在するDOMノードごとに文字をグループ化する必要があります。グループを作成したら、各グループを<span>タグでラップする必要があります。
これを行うには、選択オブジェクトのプロパティanchorNodeとfocusNodeプロパティを確認し、他のもっともらしいノード（つまり、アンカーノードとフォーカスノードの共通の親/祖先のすべての子）をcontainsNode()メソッドでテストします。