Использовать JavaScript, чтобы захватить слова, окружающие выделение и часть того же элемента <p>? - PullRequest
Новая
       22

Использовать JavaScript, чтобы захватить слова, окружающие выделение и часть того же элемента <p>?

2 голосов
/ 13 февраля 2011

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

Например, рассмотрим следующее: 

<p>The quick brown fox jumped over the fence.</p>

Если бы пользователь выбрал «прыжок» (выделив его) и щелкнул букмарклет, я бы хотел отправить «прыжок» в виде одной закодированной строки, а «Быстрая коричневая лиса перепрыгнула через забор» в качестве дополнительной кодированной строки.

Вот что я получил до сих пор. Функция getSelection отправляет «прыжок» моему сервису: 

javascript:location.href='http://www.myservice.com/new.php?'+'url_def='+encodeURIComponent(getSelection())

Что я могу добавить к этому, чтобы получить дополнительный текст в элементе абзаца для моей службы?

Ответы [ 2 ]

3 голосов
/ 13 февраля 2011

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

Пример: http://jsfiddle.net/timdown/X7n5R/

Код: 

function getSelectedText() {
    var selectedText = "", containerText = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            selectedText = range.toString();
            var container = range.commonAncestorContainer;
            if (container.nodeType == 3) {
                container = container.parentNode;
            }
            containerText = container.textContent;
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        selectedText = textRange.text;
        containerText = textRange.parentElement().innerText;
    }
    return {
        selectedText: selectedText,
        containerText: containerText
    };
}
1 голос
/ 13 февраля 2011

Вы можете использовать document.getSelection() и проверить узел привязки, чтобы увидеть, какой <p> был выбран.

Так что это будет ссылаться на «окружающий текст»: document.getSelection().anchorNode.parentNode.innerHTML

...