ユーザーがテキスト ドキュメント (Google ドキュメントなど) にコメントできるようにするアプリケーションがあります。ユーザーがページからこれらのコメントを削除できるようにすると、奇妙な動作が発生します。削除のリクエストに応じて、コメントから元のコンテンツを抽出して抽出し、ページからコメントを削除するコードを実行します。
削除コードは次のようになります
html = html + $(this).html()
$(this).children().andSelf().unbind();
$(this).contents().unwrap()
$(this).remove()
コードはより大きなコードから抽出されたものですが、この問題を特定するために残りのコードが必要だとは思いません。実際、このコードを修正する必要があるかどうかさえわかりません。
とにかく、ユーザーが (上記のコードを使用して) コメントを削除し、同じ場所に別のコメントを残そうとすると、問題が発生します。何にコメントを残そうとしても、古いコメントのコンテンツの一部が含まれていれば、ブラウザは古いコメントのすべてのコンテンツを自動的に選択します。
奇妙なことに、html を徹底的にスキャンしたところ、古いコメントの html ベースの名残はありません。ブラウザに残っているのは（要素を検査したとき）、コメントの開始と終了に使用された壊れた引用符だけです。
これは、コメントが配置された抽出された抜粋です (これは hl クラスのスパンです)
<span class="T1">Lorem ipsum hendrerit in
<span class="hl s_240" highlight_id="s_240">
<span class="remove_highlight" style="display: none;">Remove</span>
"vulputate"
</span> velit esse
</span>
コメントが削除された後に抽出されたコードは次のとおりです
<span class="T1">Lorem ipsum "vulputate" velit esse </span>
前に強調表示された単語の周りの引用符に注意してください。新しいコメントを残すと、veluptuate の e と次の単語の v のみを選択して、次のようになります。
<span class="T1">"Lorem ipsum hendrerit in "
<span class="hl new_hl s_421" highlight_id="s_421">
<span class="remove_highlight">Remove</span>
"vulputate v"
</span>
"elit esse"
</span>
ご覧のとおり、ブラウザは、単語 vulputate の一部しか選択していないにもかかわらず、その単語全体を強調表示したかったと自動的に想定します。
これがなぜ起こっているのか、またはそれを修正する方法を誰かが教えてくれたら、とても感謝しています!