18

ユーザーが選択したものに基づいてhtmlを操作するjavascriptがあります。実際のブラウザーの場合、私が使用しているメソッドは、次のように取得された「Range」オブジェクトを活用します。

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var content = range.toString();

content 変数には、選択したすべてのテキストが含まれており、正常に機能します。ただし、結果の文字列で改行を検出できないことがわかりました。例えば：

選択したテキストは次のとおりです。

abc

デフォルト

ギ

range.toString() は "abcdefghi" に評価されます。

特殊文字を検索しても、\n \f \r または \s のインスタンスは返されません。ただし、変数を編集可能なコントロールに書き出すと、改行が再び表示されます。

誰かが私が欠けているものを知っていますか?

これらの選択と操作が編集可能な div にあることが関連している可能性があります。Chrome、FireFox、および Opera でも同じ動作が見られます。驚くべきことに、とにかく IE はまったく異なるコードを必要としますが、IE であること以外に問題はありません。

どうもありがとう。

4

3 に答える 3

16

投稿の編集:

少し実験してみるとsel.toString()、contenteditable div ではrange.toString()改行が返されますが、通常の編集不可能な div では改行が正しく返されますが、編集可能なものでは返されません。

ただし、動作の説明は見つかりませんでした。

これは便利なリンクですhttp://www.quirksmode.org/dom/range_intro.html

于 2009-07-18T05:30:19.807 に答える
0

OPのおかげで、彼が提案したように window.getSelection() を使用してそれを行うことができました。InputEvent のキャレット位置までテキストを取得する必要がありました。これにより、挿入されたテキストで静的な範囲が得られます。したがって、範囲はありますが、必ずしも現在の選択の範囲ではありません。

function richToPoorText(range){
    //Caso base, está colapsado.
        console.log(range);
        var restoreRange=document.createRange(); //needed for restoring the caret pos.
        restoreRange.setStart(range[0].endContainer, range[0].endOffset);
        restoreRange.setEnd(range[0].endContainer, range[0].endOffset);
        rangeClone=document.createRange();
        rangeClone.setStart(__baseEditor,0);
        rangeClone.setEnd(range[0].endContainer, range[0].endOffset);
        var str;
        var sel=window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rangeClone);   //sel does converts the br to newlines
        str=sel.toString();
        sel.removeAllRanges();
        sel.addRange(restoreRange);
        return str;

}

ありがとうございます。誰かが同じユースケースを持っている場合は、このスニップセットを使用できます

編集: __baseEditor は、エディターのメイン contenteditable div を指すグローバル変数です。

于 2018-07-22T00:18:18.997 に答える