<p>One of the things I'd like to do in my browser-based application is allow the user to select some text (not in a &lt;textarea&gt;, just plain ol' text!), and have my application pop up a small toolbar that then can interact with the next (in my case, add annotations).</p>

<p>I've found a lot of stuff on google that seems to be focused on writing WYSIWYG editors, <strong>but that isn't what I want</strong>, and most of it worked in IE but not in FF2 or 3. Ideally, I'd like some function that can return the currently selected text in the browser window that works in <strong>IE7 (and 6 if possible), FireFox 2 &amp; 3 and Safari 2</strong>. If it works in Opera, that'd be a bonus, but it's not a requirement.</p>

<p>Anyone have a function that does this? Or an idea of where to start?</p>

[{'answer_id': 10502, 'author': 'palehorse', 'author_id': 312, 'author_profile': 'https://Stackoverflow.com/users/312', 'pm_score': 4, 'selected': True, 'text': '<p>Have a look at <a href="http://jquery.com" rel="noreferrer">jQuery</a> and the <a href="http://plugins.jquery.com/project/wrapSelection" rel="noreferrer">wrapSelection plugin</a>.  It may be what you are looking for.</p>\n'}, {'answer_id': 13904, 'author': 'Walter Rumsby', 'author_id': 1654, 'author_profile': 'https://Stackoverflow.com/users/1654', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://www.quirksmode.org/dom/range_intro.html" rel="nofollow noreferrer">Introduction to Range</a> has some details on how different browsers give you access to the text selection.</p>\n\n<p>My experience is that working with these different APIs directly is quite clumsy so if <a href="http://plugins.jquery.com/project/wrapSelection" rel="nofollow noreferrer">wrapSelection</a> works for you I\'d go with that.</p>\n'}, {'answer_id': 13907, 'author': 'eplawless', 'author_id': 1370, 'author_profile': 'https://Stackoverflow.com/users/1370', 'pm_score': -1, 'selected': False, 'text': '<p>The behaviour of individual browsers with regard to selection is <a href="http://quirksmode.org/dom/w3c_range.html" rel="nofollow noreferrer">outlined here</a>.</p>\n'}, {'answer_id': 13914, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': -1, 'selected': False, 'text': "<p>This code works in Safari, IE and Firefox - hope it's of some help</p>\n\n<pre><code>var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();\nstr = str.text || str;\nstr = str + ''; // the best way to make object a string...\n</code></pre>\n"}, {'answer_id': 169873, 'author': 'Greg Borenstein', 'author_id': 10419, 'author_profile': 'https://Stackoverflow.com/users/10419', 'pm_score': 4, 'selected': False, 'text': '<p>That jQuery plugin is cool but it accomplishes a very specific task: wrap the text you highlight with a tag. This may be just what you want. But if you don\'t want to (or are in a situation where you can\'t) add any extraneous markup to your page, you might try the following solution instead:</p>\n\n<pre><code>function getSelectedText() {\n  var txt = \'\';\n\n  if (window.getSelection) {\n    txt = window.getSelection();\n  }\n  else if (document.getSelection) {\n    txt = document.getSelection();\n  }\n  else if (document.selection) {\n    txt = document.selection.createRange().text;\n  }\n  else return; \n\n  return txt;\n}\n</code></pre>\n\n<p>This function returns an object representing the text selection. It works across browsers (though I suspect the objects it returns will be slightly different depending on the browser and only dependable for the actual text of the result rather than any of the additional properties).</p>\n\n<p>Note: I originally discovered that code fragment here: <a href="http://www.codetoad.com/javascript_get_selected_text.asp" rel="noreferrer">http://www.codetoad.com/javascript_get_selected_text.asp</a></p>\n'}, {'answer_id': 54039149, 'author': 'YakovL', 'author_id': 3995261, 'author_profile': 'https://Stackoverflow.com/users/3995261', 'pm_score': 2, 'selected': False, 'text': '<p>These days this method <a href="https://caniuse.com/#search=window.getSelection" rel="nofollow noreferrer">should be enough</a>:</p>\n\n<pre><code>function getSelectedText() {\n    return window.getSelection ? window.getSelection().toString() : \'\';\n}\n</code></pre>\n\n<p>It will return <code>\'\'</code> in rare occasions of really old browsers and may be in the case of Opera Mini (to be tested, though, this may be outdated) + see note for UC Browser for Android.</p>\n'}]
['https://Stackoverflow.com/questions/10478', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/722/']