selection of text and then split it into three parts with jQuery for AJAX

Question

I would like to take a bunch of HTML inside a container(DIV) then let the user select part of it. Its not an "editable area" that I am looking for. As we dont want the user to be able to overwrite/change the text. Just mark it.

After the user has selected it, I would like to know what was selected BUT also WHERE that selected part IS.

Eg.

1. We have a bullet list and the users selects bulletline 3 and 4.

2. We have some Headline1 and three paragraphs. Then the user selectes part of the middle paragraph. I would like to know where in that paragraph.

I've research a little and from what I understand MSIE has a problem with selection, if it comes to the startPos and endPos of the selection.

Secondly, what if the marked text is multiple times inside the whole container?

Here is an example:

<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>

The problem is here if the user selects "tempus" its not good enough to know the word, I also need to know WHICH of the words (what paragraph/headline/bullet element) it is.

Reason is that we want "readers" to be able to spot things of interest/attention. Sometimes whole paragraphs, sometimes just a single word or headline.

The perfect solution

would be if we somehow could detect in which "element" (counting from top I guess) in the DOM that is selected. Secondly how much (start and end point) inside that particular element.

Because then we could do some sort of Ajax back to our ASP.NET which tells the backend what has been marked and then do what ever ...

I've found some online-code editors that does a BUNCH of the above + a lot more than needed, but believe the solution is much more simple on this one. Just cant find the proper way to get started with a jQuery solution.

In hope of a jQuery Yoda reading this. :-)

Answer 1

Here is a cross browser library that will do all you want for you http://code.google.com/p/rangy/

Answer 2

Sorry this is only a partial answer this will give you indexes of elements in which the selection starts and ends in all browsers, but the offsets of the beginning and end of selection will only work in Gecko and WebKit browsers. IE only supports a TextRange object which is a bit of a mystery to me and a bit of a pain to work with (the link at the bottom of this answer has an example of implementation covering all browsers)

This solution returns indexes of elements that the selection contains (in relation to your #markable container) and indexes of start and end selection (in relation to their containing nodes).

In this example I am using events to capture the elements which contain the selection (this gets around browser differences) but you can easily do this without events as well (for Firefox, Opera, Chrome and Safari) as the Range object gives you anchorNode and focusNode which are the DOM nodes in which the selection starts and ends respectively (more info here http://www.quirksmode.org/dom/range_intro.html)

<html>
<head>

  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <script>

  var end;
  var start;

  indexes = new Array();
var endIndex;
  var startIndex;
  $(document).ready(function(){


$("#markable").mouseup(function(event){
end = event.target;

indexes.push($("*", "#markable").index($(end)));
//normalize start and end just in case someone selects 'backwards' 
indexes.sort(sortASC);




event.stopPropagation()
})

$("#markable").mousedown(function(event){
indexes.length=0;
start = event.target;
event.stopPropagation()
indexes.push($("*", "#markable").index($(start)));
})

$(".button").click(function(){

sel = getSel();

alert("Index of the element selection starts in (relative to #markable): "+indexes[0] +"\n" + 
"Index of the of the beginning of selection in the start node: "+ sel.anchorOffset+"\n" + 
"Index of the element selection ends in  (relative to #markable): "+ indexes[1]+"\n"+ 
"Index of the of the end of selection in the end node: "+ sel.focusOffset)

})

  })




function sortASC(a, b){ return (a-b); }
function sortDESC(a, b){ return (b-a); }

function getSel()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }

    else if (document.selection)
    {
        txt = document.selection.createRange();
            }
    else return;
return txt;
}
</script>

</head>
<body>
<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>
<input type=button class=button value="Get selection data">


</body>
</html>

And here is a link which will give you more of a cross browser solution (scroll down to example 2) http://help.dottoro.com/ljjmnrqr.php

EDIT: For IE you need to use document.body.createTextRange() to get a text range. I am still not sure how you get the equivalent of anchorOffset but the following link might be helpful: http://bytes.com/topic/javascript/answers/629503-ie-selection-range-set-range-start-click-position-get-char-offset