0

私のHTMLが次のようになっているとしましょう

<div>
    <p> start<span>span</span>end </p>
</div>

スパンタグを無視せずに、選択が行われたときにオフセットを取得できる必要があります。

たとえば、ユーザーが選択したとします

t<span>span</span>e

開始オフセットとして4を取得し、終了オフセットとして24を取得したいと思います。window.getSelection（）を介して取得された選択オブジェクトは1,8を返しますが、これは私にはかなり役に立ちません。明らかに、ユーザーが内側のスパンのみ、またはスパンの一部などを選択するすべてのケースを処理する必要があります。

ありがとう

4

1 に答える 1

1

私はこのようにそれを解決することになりました：

            var range = sel.getRangeAt(0);
            // inserts two spans at the beginning and end of the range, to
            // calculate the offsets
            var div = document.createElement("span");
            div.setAttribute("class", START_NODE);
            range.insertNode(div);
            range.collapse(false);
            div = document.createElement("span");
            div.setAttribute("class", END_NODE);
            range.insertNode(div);
            // gets the offsets by looking up the location of the inserted spans
            // removes them after finding the offsets (also so the starting
            // offset won't screw up the ending offset)
            comment.startOffset = p.html().indexOf('<span class="' + START_NODE + '">');
            $("." + START_NODE).remove();
            comment.endOffset = p.html().indexOf('<span class="' + END_NODE + '">');
            $("." + END_NODE).remove();
            p.html(p.html());

基本的に、範囲選択の最初にSPANを追加し、次に範囲を折りたたんで、最後にSPANを追加しました。次に、追加した最初のスパンのインデックスと、追加した2番目のスパンのインデックスを検索してオフセットを見つけました。

于 2012-12-09T11:41:26.540 に答える