首頁(yè) 猿問(wèn) 如何用javascript選擇ht...

如何用javascript選擇html文本？

JavaScript

千萬(wàn)里不及你 2019-08-06 17:40:47

如何用javascript選擇html文本？我可以使用以下代碼來(lái)獲取所選文本：text=window.getSelection(); /// for Firefoxtext=document.selection.createRange().text; /// for IE但是如何獲得所選的Html，其中包括text和html標(biāo)簽？

查看完整描述

3 回答

九州編程

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊

在IE <= 10個(gè)瀏覽器中，它是：

document.selection.createRange().htmlText

正如@DarrenMB所指出的，IE11不再支持這一點(diǎn)。請(qǐng)參閱此答案以供參考。

在非IE瀏覽器中，我只是試著玩這個(gè)...這似乎有用，會(huì)有一些副作用，將節(jié)點(diǎn)分成兩半并創(chuàng)建一個(gè)額外的跨度，但這是一個(gè)起點(diǎn)：

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);

不幸的是，我似乎無(wú)法將節(jié)點(diǎn)恢復(fù)原狀（例如，因?yàn)槟憧梢詮囊粋€(gè)跨度中拉出一半的文本）。

反對(duì) 回復(fù) 2019-08-06

慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊

這是一個(gè)函數(shù)，它將為您提供與所有主流瀏覽器中當(dāng)前選擇相對(duì)應(yīng)的HTML。它還處理選擇中的多個(gè)范圍（目前僅在Firefox中實(shí)現(xiàn)）：

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());

反對(duì) 回復(fù) 2019-08-06

叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

這就是我想出來(lái)的。經(jīng)過(guò)IE，Chrome，F(xiàn)irefox，Safari，Opera測(cè)試。不返回空字符串。

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;}

反對(duì) 回復(fù) 2019-08-06