1

how to get a selected text and xy coordinates of the word in the same time??

user495688
  • 973
  • 2
  • 15
  • 25
  • Can you clarify your question? Which word? What if you select a paragraph? What (X, Y) do you want in that case? The start of the selection? Its end, where mouseup occurred? Then just use .pageX and .pageY. Otherwise, see [Coordinates of selected text in browser page](http://stackoverflow.com/questions/6846230/coordinates-of-selected-text-in-browser-page). – Dan Dascalescu Jul 21 '15 at 07:11

4 Answers4

2

Just googled it:

var txt = "";

if (window.getSelection) {
    txt = window.getSelection();
} else if (document.getSelection) {
    // FireFox 
    txt = document.getSelection();
} else if (document.selection) {
    // IE 6/7 
    txt = document.selection.createRange().text;
}

txt = txt.toString()

There is no simple way to get X/Y coordinates of the selected text. Because it dependes on its container position and size, text font, text layout, and many many other variables.

MatuDuke
  • 4,997
  • 1
  • 21
  • 26
  • 1
    This doesn't get you the selected text, except in IE. In other browsers it returns a `Selection` object, on which you can call `toString()` to get the selected text. You also haven't answered the other, harder, part of the question. – Tim Down Nov 08 '10 at 14:24
  • Thanks for the correction, I just didn't tested the code, because it was very trivial. Regarding the harder part of the question, I've got no answer for this... :( – MatuDuke Nov 08 '10 at 19:01
  • I've seen this done before over here: http://openshakespeare.org/work/hamlet so it's not a question of IF it's a question of HOW. Would like to see this answered. – arxpoetica Jul 30 '12 at 18:33
  • Actually, just figured out they're getting the clientX of the mouse when the mouseup event is fired. Smart hack. – arxpoetica Jul 30 '12 at 18:34
  • 1
    For the harder part of the question, see [Coordinates of selected text in browser page](http://stackoverflow.com/questions/6846230/coordinates-of-selected-text-in-browser-page) – Dan Dascalescu Jul 21 '15 at 07:10
1

To expand on @MatuDuke's answer, you can get the position of the selected text like so:

var txt = window.getSelection(),
    range = txt.getRangeAt(0),
    boundary = range.getBoundingClientRect();

// Available positions:
// boundary.top
// boundary.bottom
// boundary.left
// boundary.right

These will give you pixel values relative to the viewport. However, it doesn't seem to work within text areas, a problem I'm currently trying to solve.

sowasred2012
  • 695
  • 1
  • 7
  • 22
0

I am using this jQuery plugin http://plugins.jquery.com/node/7411 for a project and it seems to be working flawlessly. You could use jQuery to get the position of mouse http://docs.jquery.com/Tutorials:Mouse_Position

Here is some sample code I have worked on

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>
dennismonsewicz
  • 25,132
  • 33
  • 116
  • 189
0

You could try something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);

                var selected_text = e.text
                var original_text = $(this).text();
                var parts = original_text.replace(e.text, "/").split("/");

                for(i in parts) {
                    console.log(parts[i])
                }
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>
dennismonsewicz
  • 25,132
  • 33
  • 116
  • 189