4

この質問は、選択したテキストにタグを適用する方法についてここで尋ねられた同様の質問を参照しています。質問には回答がありましたが、その回答には 1 つの大きな欠陥がありました。それは、選択された同じテキストがドキュメント内の別の場所に存在する場合、<span>問題のテキストではなく、重複をラップすることです。

これはおそらくいくつかのstackoverflowプロトコルに反していることに気づきましたが、続行する方法についての本当の手がかりなしにここに投稿しています. 私の最善の推測は、選択したテキストの前の文字列の長さをどうにかして見つけることです（これらの行に沿ったもの）が、それを置換関数自体に組み込む方法...まあ、プッシュを使用できます。誰？

(以前の投稿 (by mathias-bynens ) の解決策を以下に貼り付けました。)

    $("p").live("mouseup",function() {
    selection = getSelectedText();
    if(selection.length >= 3) {
        var spn = '<span class="selected">' + selection + '</span>';
        $(this).text($(this).html().replace(selection, spn));

    }
});

//Grab selected text
function getSelectedText(){
    if(window.getSelection){
        return window.getSelection().toString();
    }
    else if(document.getSelection){
        return document.getSelection();
    }
    else if(document.selection){
        return document.selection.createRange().text;
    }
}
4

3 に答える 3

4

私はごまかし、document.execCommand を使用して選択したテキストをラップし、次に href (CreateLink execCommand の 3 番目のパラメーター) を使用して要素を見つけ、必要なものでラップしてから、リンクを削除しました。

$("p").live("mouseup",function() {
    document.execCommand('CreateLink', false, 'uniqueid');
    var sel = $('a[href="uniqueid"]');
    sel.wrap('<span class="selected" />')
    sel.contents().unwrap();
});

document.execCommand はすべての主要なブラウザーでサポートされているため、この方法で安全にハッキングできるはずです。私がテストしたブラウザでは、ブラウザ自体がタグを閉じたり開いたりするので、ある html タグの真ん中から別のタグの真ん中まで選択している場合、タグを正しくネストする必要があります。

于 2013-02-23T08:14:52.810 に答える
0

あなたの鍵は、 getSelection が返すものを理解し、それを操作することだと思います。

Firefoxで私はこれを行うことができました:

$(document.getSelection().anchorNode).wrap('<div style="color:blue">')

document.selection.createRange() には、選択されたものを見つけることができる同様のものが必要です。

次のようなもの：

$("p").live("mouseup",function() {
    var $sel = getSelectedElem();
    if($.trim($sel.text()).length >= 3) {
        $sel.warp('<span class="selected">');
    }
});

//Grab selected text
function getSelectedElem(){
    if(window.getSelection){
        return $(window.getSelection().anchorNode);
    }
    else if(document.getSelection){
        return $(document.getSelection().anchorNode)
    }
    else if(document.selection){
        //todo figure out what to return here:
        return document.selection.createRange().text;
    }
    return $([]);
}
于 2012-05-15T21:50:00.750 に答える