1

これに対する解決策を見つけようとして、しばらくの間オンラインで検索してきました。私がしたいのは、テキスト選択の開始点と終了点を同等の html 選択値に変換することです。

例：

HTML: test text **some <span style="color:red">te**st t</span>ext
TEXT: test text **some te**st text

ユーザーが上記の ** で囲まれた部分を選択したとします。テキスト選択の位置を取得するのに問題はありません: start: 10, end: 17.しかし、取得したいのは、html 要素を含む選択の位置です: start: 10, end: 41

誰でもこれに対する解決策を提案できますか?

編集: 要求に応じて、選択したテキストの開始点と終了点を取得する既存のコードを添付しました。取得したいのは、選択した HTML の開始点と終了点です。

        var start = 0, end = 0;
        var sel, range, priorRange;
        if (typeof window.getSelection != "undefined") {
                range = window.getSelection().getRangeAt(0);
                priorRange = range.cloneRange();
                priorRange.selectNodeContents(el[ 0 ]);
                priorRange.setEnd(range.startContainer, range.startOffset);
                start = priorRange.toString().length;
                end = start + range.toString().length;
        } else if (typeof document.selection != "undefined" &&
                (sel = document.selection).type != "Control") {
                range = sel.createRange();
                priorRange = document.body.createTextRange();
                priorRange.moveToElementText(el[ 0 ]);
                priorRange.setEndPoint("EndToStart", range);
                start = priorRange.text.length;
                end = start + range.text.length;
        }
4

1 に答える 1

0

これが私が思いついた解決策です。通常のテキスト選択ポイントを取得し、プリミティブに html ポイントに変換します。これはおそらく基本的なケースでのみ機能しますが、アプリケーションに必要なのはこれだけです。

        // this gives me a cross browser start and end position
        // for the text selection
        var start = 0, end = 0;
        var sel, range, priorRange;
        if( typeof window.getSelection != "undefined" ){
                range = window.getSelection( ).getRangeAt( 0 );
                priorRange = range.cloneRange( );
                priorRange.selectNodeContents( el[ 0 ] );
                priorRange.setEnd( range.startContainer, range.startOffset );
                start = priorRange.toString( ).length;
                end = start + range.toString( ).length;
        }
        else if( typeof document.selection != "undefined" && ( sel = document.selection ).type != "Control" ){
                range = sel.createRange( );
                priorRange = document.body.createTextRange( );
                priorRange.moveToElementText( el[ 0 ] );
                priorRange.setEndPoint( "EndToStart", range );
                start = priorRange.text.length;
                end = start + range.text.length;
        }

        // now, get this in terms of html selection
        var html = el.html( ), text = 1, htmlstart = 0, htmlend = 0;
        for( var i = 0, t = 0; i < html.length; ++i ){
                if( html[ i ] == '<' || html[ i ] == '>' ){
                        text = text ? 0 : 1;
                        continue;
                }
                if( text )
                        t++;
                if( t == start )
                        htmlstart = i + 1;
                if( t == end ){
                        htmlend = i + 1;
                        break;
                }
        }
于 2013-03-21T13:55:26.260 に答える