как получить выделение внутри div с помощью jquery / javascript

#javascript #jquery

Вопрос:

есть много кода для получения выделения на странице, но я хочу код для получения выделения внутри div, если выделение находится за пределами моего div, функция должна возвращать пустую строку;

существует плагин jquery, который работает только для текстовой области, но не для div. (здесь)

Спасибо

Ответ №1:

Это немного многословно из-за многословных сравнений границ и потому, что IE использует подход, отличный от других браузеров, но выполняет эту работу во всех основных браузерах. Он также обрабатывает множественные выделения в Firefox.

jsFiddle:http://jsfiddle.net/Q982A/2

Код:

 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 amp;amp; 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" amp;amp; document.selection.type == "Text") {
        var selTextRange = document.selection.createRange();
        var textRange = selTextRange.duplicate();
        textRange.moveToElementText(el);
        if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 amp;amp; 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;
}

В качестве альтернативы вы могли бы использовать мою разнообразную библиотеку, и код станет:

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

Ответ №2:

Вы можете использовать:

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

чтобы получить элемент, в котором заканчивается выделение.

Затем вы можете определить, находится ли этот элемент внутри вашего div.

Ответ №3:

Вы можете добиться этого с помощью плагина Text select —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>