获取特定分区中所选内容的HTML

Get HTML of selection in a specific div

本文关键字：HTML 分区 获取      更新时间：2024-04-17

我发现了一个代码片段（记不清在哪里），它运行良好-几乎：-）

问题是，无论在整个网站的哪个地方进行选择，它都会复制选择，而且只有在特定的div中，它才能复制选择——但这是如何做到的？

function getHTMLOfSelection () {
    var range;
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        return range.htmlText;
    }
    else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
            var clonedSelection = range.cloneContents();
            var div = document.createElement('div');
            div.appendChild(clonedSelection);
            return div.innerHTML;
        } else {
            return '';
        }
    } else {
        return '';
    }
}
$(document).ready(function() {
    $("#test").click(function() {
        var kopitekst = document.getElementById("replytekst");
        var kopitjek=getHTMLOfSelection(kopitekst);
        if (kopitjek=='')
        {
            alert("Please select some content");
        }
        else
        {
            alert(kopitjek);
        }
    });
});

我做了一个Jsfidle

这是我在这里的第一篇帖子。希望我做得对：-）

这是因为它使用检查整个文档

if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    return range.htmlText;
}

不是特定的部分。如果你想检查所选文本的特定部分，你需要确定你正在搜索选择中搜索它们，这会将你的范围锁定到一个特定的div：

range=$（'#replytekst'）；

指定一个特定的DOM元素，而不是使用文档对象。

var oDiv = document.getElementById( 'selDiv' );

然后使用

if ( oDiv.selection && oDiv.selection.createRange ) {
    range = oDiv.selection.createRange();
    return range.htmlText;
}

您需要检查该部分是否包含所选内容。这与获取所选内容是分开的。这个答案中有一种方法：如何知道所选文本是否在特定的div 内

我已经更新了你的小提琴

基本上，您需要检查所选文本节点的父节点/上级节点的id。

selection.baseNode.parentElement.id或selection.baseNode.parentElement.parentElement.id会给你这个。

编辑：我想到了另一种有点技巧的方法。

如果

kopitekst.innerHTML.indexOf(kopitjek) !== -1

给出true，则您选择了正确的文本。

DEMO1

DEMO2

（这些在Chrome和Firefox中都可以使用，但您可能需要稍微重组getHTMLOfSelection函数）

如果可能的话，我建议您使用rangy框架。那么你的代码可能看起来像这样：

// get the selection
var sel = rangy.getSelection();
var ranges = sel.getAllRanges();
if (!sel.toString() || !sel.toString().length)
    return;
// create range for element, where selection is allowed
var cutRange = rangy.createRange();  
cutRange.selectNode(document.getElementById("replytekst"));
// make an array of intersections of current selection ranges and the cutRange
var goodRanges = [];
$.each(ranges, function(j, tr) {
    var rr = cutRange.intersection(tr);
    if (rr)
        goodRanges.push(rr);
});
sel.setRanges(goodRanges);
// do what you want with corrected selection
alert(sel.toString());
// release
sel.detach();

在这段代码中，如果文本是在特定的div中选择的，那么它将被保留，如果其他元素也参与了选择，这些选择范围将被切断。

相关文章：