Как я могу получить элемент, в котором находится выделенный текст? - PullRequest
Новая
       15

Как я могу получить элемент, в котором находится выделенный текст?

13 голосов
/ 09 января 2011

Я пытаюсь научиться писать букмарклет, в котором я могу выделить какой-то текст, щелкнуть по букмарклету и попросить его рассказать, что было выделено.Я могу зайти так далеко, но затем я хочу узнать, в каком элементе находится этот текст.

Например: 

<div id="some-id">to be highlighted</div>

Код букмарклета: 

javascript:(function(){alert(window.getSelection();})()

Если я выделю текст «быть выделенным», а затем нажму на букмарклет, он предупредит текст.Но как я могу получить элемент, в котором находится текст, в данном случае этот элемент после этого?

Итак, последовательность действий: выделите текст, щелкните букмарклет, букмарклет скажет вам, что вы выделили, и элемент, в котором он находится.

Спасибо!

Ответы [ 3 ]

23 голосов
/ 09 января 2011

Попробуйте что-то похожее на это, чтобы получить элемент dom, содержащий выделенный текст. 

window.getSelection().anchorNode.parentNode

Он работает на Firefox и Chorme, вы должны протестировать его в остальных браузерах.

Это имеет причуду, если вы выбираете текст, который выглядит больше, чем элемент, возвращается только первый.Но, возможно, вы можете жить с этим.

Просто для справки о том, что такое свойство anchorNode: http://help.dottoro.com/ljkstboe.php

В Internet Explorer этот фрагмент должен помочь (я не могу это проверить)

document.selection.createRange().parentElement();

, как указано в http://msdn.microsoft.com/en-us/library/ms535872.aspx и http://msdn.microsoft.com/en-us/library/ms536654.aspx

Объяснение диапазона в режиме причуд: http://www.quirksmode.org/dom/range_intro.html

7 голосов
/ 09 января 2011

Вы можете сделать это относительно просто во всех основных браузерах. Код ниже, живой пример: http://jsfiddle.net/timdown/Q9VZT/

function getSelectionTextAndContainerElement() {
    var text = "", containerElement = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var node = sel.getRangeAt(0).commonAncestorContainer;
            containerElement = node.nodeType == 1 ? node : node.parentNode;
            text = sel.toString();
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        containerElement = textRange.parentElement();
        text = textRange.text;
    }
    return {
        text: text,
        containerElement: containerElement
    };
}
0 голосов
/ 09 января 2011

Я не думаю, что вы можете, он единственный способ узнать, какой элемент в настоящее время используется, это использовать событие onclick для элемента. Кроме этого нет верного пути. Однако вы можете искать каждый элемент, пока не найдете элемент с тем же текстом, 

jQuery('*:contains(' + selected + ').

Вы можете добавить событие, чтобы получить текущий элемент с этим кодом, хотя (не проверено) 

var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
    all[i].onclick = function(e){
        window.selectedElement = all[i];
        //preventDefault $ StopBubble &
        return false;
    }

И оно будет сохранено в выделенном элементе

Хорошо, попробуйте это: 

var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
    all[i].onclick = function(e) {
        window.selectedElement = this;
        ((e && e.stopPropagation && e.stopPropagation()) ||
         (window.event && (window.event.cancelBubble = true)));
        return false;
    }

ДЕМО: http://jsfiddle.net/HQC6Z/1/ Еще лучше: http://jsfiddle.net/HQC6Z/

Посмотрев на другие ответы, я забираю свое решение и предлагаю их:

Как получить элемент, в котором выделен текст?

Как получить элемент, в котором выделен текст?

...