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

IT技术 javascript getselection
2021-01-28 12:21:18

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

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

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

5个回答

这是一个函数,可以让您获得与所有主要浏览器中的当前选择相对应的 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());
我注意到结果getSelectionHtml()包括额外的换行符——除此之外,这是一个很好的修复!
2021-03-14 12:21:18
此解决方案的问题在于,当您选择<p>第一段 TEXT TO</p><p>BE SELECTED 第二段</p> 的大写锁定部分时,您不会得到预期的“TEXT TO</p” ><p>BE SELECTED”但“<p>TEXT TO</p><p>BE SELECTED</p> - 出于某种原因,浏览器广告标签不在选择中,以便关闭选择中的标签。是有什么方法可以只获得选择中的真正内容?
2021-03-16 12:21:18
@think123:,textarea.value.slice(textarea.selectionEnd)除了在 IE <= 8 中(我之前已经在 SO 上发布了旧 IE textarea 选择的解决方案)。
2021-03-22 12:21:18
如果我想要在 textarea 中选择的文本之后的文本怎么办?
2021-04-01 12:21:18
我在循环中运行这个函数,想知道是否.createElement会导致内存泄漏......我们不应该container.remove();用来清理还是无论如何都会被 GC 收集?
2021-04-08 12:21:18

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

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

也没有人再大写 HTML 标签了
2021-03-14 12:21:18
你应该使用cloneContents()而不是extractContents()
2021-03-29 12:21:18

这是我想出的。使用 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;
}
这不会返回 HTML 标签!
2021-03-31 12:21:18
这会丢失所有当前格式(粗体、斜体、bg 颜色等)
2021-04-03 12:21:18
这似乎是 CTRL-C 或 CMD-C 复制选择的方式。
2021-04-07 12:21:18

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

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

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