Javascript 如何使用javascript获取选定的html文本？

How to get selected html text with javascript?

提问by user570494

I can use the following code to get selected text:

我可以使用以下代码来获取选定的文本：

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

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

But how can I get the selected Html, which includes the text and html tags?

但是如何获得选定的 Html，其中包括 text 和 html 标签？

采纳答案by Mark Kahn

In IE <= 10 browsers, it's:

在 IE <= 10 浏览器中，它是：

document.selection.createRange().htmlText

As @DarrenMB pointed out IE11 no longer supports this. See this answerfor reference.

正如@DarrenMB 指出的，IE11 不再支持这一点。请参阅此答案以供参考。

---

---

In non-IE browsers, I just tried playing with this... this seems to work, WILL have side effects from breaking nodes in half and creating an extra span, but it's a starting point:

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

Unfortunately, I can't seem to put the node back as it was (since you can be pulling half the text from a span, for instance).

不幸的是，我似乎无法将节点放回原样（例如，因为您可以从跨度中提取一半的文本）。

回答by Tim Down

Here's a function that will get you HTML corresponding to the current selection in all major browsers. It also handles multiple ranges within a selection (currently only implemented in Firefox):

这是一个函数，可以让您获得与所有主要浏览器中的当前选择相对应的 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());

回答by Alex

Here's what I came up with. Tested with IE, Chrome, Firefox, Safari, Opera. Doesn't return empty string.

这是我想出的。使用 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;
}

回答by nkkollaw

@zyklus:

@zyklus：

I modified your function to work (I'm using jQuery but those pieces can be easily rewritten in Javascript):

我修改了你的函数来工作（我使用的是 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;
}

回答by Igor G.

I found highlightplugin to be the best match, it is very light and with it you can highlight part of the content:

我发现高亮插件是最好的匹配，它非常轻巧，你可以突出显示部分内容：

$('li').highlight('bla');