Question

我找到了一个代码片段（不记得在哪里），并且工作正常 - 几乎： - ）

问题是，无论在整个网站上做出选择的位置，它都会复制选择，并且只有在选择位于特定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);
        }
    });
});

我做了Jsfiddle

这是我在这里的第一篇文章。希望我做对了： - ）

Answer 1

那是因为它用以下内容检查整个文档：

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

不是特定部分。如果您要检查所选文本的特定部分，您需要在搜索选择中识别您正在搜索它们，这些内容将您的范围指定为特定的div：

range = $（'＃replytekst'）;

Answer 2

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

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

然后使用

if ( oDiv.selection && oDiv.selection.createRange ) {

    range = oDiv.selection.createRange();
    return range.htmlText;

}

Answer 3

您需要检查该部分是否包含所选内容。这与获取选择是分开的。在这个答案中有一种方法：How to know if selected text is inside a specific div

Answer 4

我已更新您的fiddle

基本上你需要检查所选文本节点的父/上升的id。

selection.baseNode.parentElement.id或selection.baseNode.parentElement.parentElement.id会为您提供。

编辑：我想到了另一种，有些黑客的方式。

如果

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

给true，您选择了正确的文字。

DEMO1

DEMO2

（这些可以在Chrome和Firefox中使用，但您可能需要稍微调整getHTMLOfSelection功能）

Answer 5

如果可能，我建议使用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中选择了文本，那么它将被保留，如果有其他元素参与的选择，则这些选择范围将被切断。

获取特定div中的选择HTML

5 个答案: