40

次のコードを使用して、選択したテキストを取得できます。

text=window.getSelection(); /// for Firefox text=document.selection.createRange().text; /// for IE

しかし、テキストタグとhtmlタグを含む選択されたHtmlを取得するにはどうすればよいですか？

4

5 に答える 5

68

これは、すべての主要なブラウザで現在選択されているHTMLに対応するHTMLを取得する関数です。また、選択範囲内の複数の範囲を処理します（現在Firefoxでのみ実装されています）。

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

alert(getSelectionHtml());
于 2011-07-12T17:08:29.167 に答える
27

IE <= 10のブラウザでは、次のようになります。

document.selection.createRange().htmlText

@DarrenMBが指摘したように、IE11はこれをサポートしなくなりました。参考のためにこの回答を参照してください。

IE以外のブラウザでは、これを試してみました...これは機能しているようです。ノードを半分に分割して余分なスパンを作成することによる副作用がありますが、これは出発点です。

var range = window.getSelection().getRangeAt(0),
  content = range.extractContents(),
     span = document.createElement('SPAN');

span.appendChild(content);
var htmlContent = span.innerHTML;

range.insertNode(span);

alert(htmlContent);

残念ながら、ノードを元に戻すことはできないようです（たとえば、スパンからテキストの半分をプルできるため）。

于 2011-04-13T02:25:39.297 に答える
6

これが私が思いついたものです。IE、Chrome、Firefox、Safari、Operaでテスト済み。空の文字列を返しません。

function getSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    else if (document.getSelection
    && document.getSelection().toString()
    && $(document.getSelection()).attr('type') != "Caret") {
        text = document.getSelection();
        return text;
    }
    else {
        var selection = document.selection && document.selection.createRange();

        if (!(typeof selection === "undefined")
        && selection.text
        && selection.text.toString()) {
            text = selection.text;
            return text;
        }
    }

    return false;
}
于 2012-04-16T19:26:25.353 に答える
0

@zyklus：

関数を機能するように変更しました（jQueryを使用していますが、これらの部分はJavascriptで簡単に書き直すことができます）。

function getSelectionHtml() {
    var htmlContent = ''

    // IE
    if ($.browser.msie) {
        htmlContent = document.selection.createRange().htmlText;
    } else {
        var range = window.getSelection().getRangeAt(0);
        var content = range.cloneContents();

        $('body').append('<span id="selection_html_placeholder"></span>');
        var placeholder = document.getElementById('selection_html_placeholder');

        placeholder.appendChild(content);

        htmlContent = placeholder.innerHTML;
        $('#selection_html_placeholder').remove();

    }


    return htmlContent;
}
于 2014-01-25T12:46:49.930 に答える
-3

ハイライトプラグインが最適であることがわかりました。非常に軽量で、コンテンツの一部をハイライトできます。

$('li').highlight('bla');
于 2014-02-24T22:22:26.073 に答える