Question

有很多代码可以在页面中进行选择，但我想要一个代码来获取div内的选择，如果选择在我的div之外，则该函数必须返回空字符串;

有一个jquery插件只适用于textarea但不适用于div。 (here)

感谢

Answer 1

由于冗长的边界比较，以及IE采用与其他浏览器不同的方法，但在所有主流浏览器中都能完成这项工作，因此略显冗长。它还可以处理Firefox中的多个选择。

代码：

function getSelectedTextWithin(el) {
    var selectedText = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection(), rangeCount;
        if ( (rangeCount = sel.rangeCount) > 0 ) {
            var range = document.createRange();
            for (var i = 0, selRange; i < rangeCount; ++i) {
                range.selectNodeContents(el);
                selRange = sel.getRangeAt(i);
                if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) {
                    if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) {
                        range.setStart(selRange.startContainer, selRange.startOffset);
                    }
                    if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) {
                        range.setEnd(selRange.endContainer, selRange.endOffset);
                    }
                    selectedText += range.toString();
                }
            }
        }
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        var selTextRange = document.selection.createRange();
        var textRange = selTextRange.duplicate();
        textRange.moveToElementText(el);
        if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) {
            if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) {
                textRange.setEndPoint("StartToStart", selTextRange);
            }
            if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) {
                textRange.setEndPoint("EndToEnd", selTextRange);
            }
            selectedText = textRange.text;
        }
    }
    return selectedText;
}

或者，您可以使用我的Rangy库，代码变为：

function getSelectedTextWithin(el) {
    var selectedText = "";
    var sel = rangy.getSelection(), rangeCount = sel.rangeCount;
    var range = rangy.createRange();
    range.selectNodeContents(el);
    for (var i = 0; i < rangeCount; ++i) {
        selectedText += sel.getRangeAt(i).intersection(range);
    }
    return selectedText;
}

Answer 2

您可以使用：

var node = window.getSelection ?        
       window.getSelection().focusNode.parentNode:
       document.selection.createRange().parentElement();

获取选择结束的元素。

然后你可以确定该元素是否在div中。

Answer 3

您可以使用文字选择插件 - http://plugins.jquery.com/node/7411

来实现此目的

在绑定代码中，您可以查询事件目标以查看它是否在您需要的元素内。

<script type="text/javascript">
    $(function() {
        $(document).bind('textselect', function(e) {
            if ($(e.target).attr("id") == "myPara") {
                alert(e.text);
            }
        });   
    });
</script>

<p id="myPara">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p>

<p id="noSelect">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p>

如何使用jquery / javascript在div中进行选择

3 个答案: