2

I'm looking to create a bookmarklet that takes a selected word and the other words in the same paragraph element, encodes them, and sends them to my server.

For instance, consider the following:

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

Had the user selected "jumped" (by highlighting it) and clicked the bookmarklet, I would want to send "jumped" as one encoded string and "The quick brown fox jumped over the fence" as an additional encoded string.

Here's what I've got thus far. The getSelection function sends "jumped" to my service:

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

What can I append to this in order to get the additional text in the paragraph element to my service?

Ryan
  • 53
  • 4
  • This may be helpful: [Getting document selections](http://stackoverflow.com/questions/361130/get-selected-text-and-selected-nodes-on-a-page/364476#364476) Goes over getting element selections on a page. Fromt here, you can find the parent element of the selection and grab its text value. – Brad Christie Feb 13 '11 at 20:31

2 Answers2

3

What you have won't work in IE, which has a different mechanism for getting hold of the selection. If what you want is the text of element containing the whole selection, you can do something like this, which will work in all major browsers.

Example: http://jsfiddle.net/timdown/X7n5R/

Code:

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
    };
}
Tim Down
  • 292,637
  • 67
  • 429
  • 506
1

You could use document.getSelection() and check the anchorNode to see which <p> has been selected.

So This would reference to the "surrounding text": document.getSelection().anchorNode.parentNode.innerHTML

JCOC611
  • 17,315
  • 12
  • 61
  • 85
  • `anchorNode` is not guaranteed to be a text node: it could easily be an element instead. Also, `window.getSelection()` is more widely supported than `document.getSelection()` and is the version being standardized by WHATWG. Finally, this won't work at all in IE <= 8, which has a different mechanism entirely. – Tim Down Feb 13 '11 at 20:57
  • That's why I support your answer! – JCOC611 Feb 13 '11 at 20:59
  • Turns out that `document.getSelection()` is specified to do the same as `window.getSelection()` for backwards compatibility, so it's not going away. – Tim Down Feb 14 '11 at 00:25