Question

可以使用Javascript获取用户使用鼠标选择的任何内容，如下所示：http://www.motyar.info/2010/02/get-user-selected-text-with-jquery-and.html

我的问题是我不仅需要这个文本，还需要：

获取围绕此文本的html（例如，如果用户选择“hello”，并且此hello在源中生成为：“<div><span>hello</span></div>”，它应该返回）。
为图形做同样的事情

任何人都可以指导我完成这个过程，或者如果不可能，还有其他选择吗？

Answer 1

这将在所有主流浏览器中执行。 IE和更多符合标准的浏览器有单独的分支。在IE中，它稍微容易一些，因为从选择中创建的专有TextRange对象具有方便的htmlText属性。在其他浏览器中，您必须使用DOM范围的cloneContents()方法创建包含所选内容副本的DocumentFragment，并通过将片段附加到元素并返回元素来从中获取HTML innerHTML财产。

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

Javascript：获取用户选择的HTML吗？

1 个答案: