1

I need the position or lets say the start and endoffset of a selected text inside of a html container (containing also html). For example: 

<span id="text-for-selection">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  <p>Aenean massa.</p>
  <p>Aenean massa.</p>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</span>

If i select the first "Aenean massa." now, I need to know the position of the first selected letter inside the text-for-selection container (including the html tags!!) - not only inside the <p> tag. I tried to search for it, but what if i select the second one, which one to choose?
I know how to get selected text or how to add html to the selection or how to replace the selected text. But i don't know how to get the range / offset inside the span container.

Any ideas?

Fabian
  • 2,693
  • 2
  • 21
  • 33
  • I'm not aware of any method to do this, because JavaScript is working ONLY with a DOM abstraction of HTML. What problem are you trying to solve? – Harvey A. Ramer Mar 24 '14 at 16:42
  • Can you show us any code you may have tried? – Jay Blanchard Mar 24 '14 at 16:42
  • 4
    Why are you using `` to wraps `

    `s and `

    `? Why not `
    `?

     – Tony Dinh Mar 24 '14 at 16:42
  • @TrungDQ It does not matter if it is a span oder div for me. It's just for surrounding with an id. – Fabian Mar 24 '14 at 16:49
  • @HarveyA.Ramer We're getting html code from a database and the user can select some text to annotate it and we need to know the exact position of the annotated text. – Fabian Mar 24 '14 at 16:52
  • http://stackoverflow.com/a/3545073/2239349 and http://jsfiddle.net/2C6fB/1/ should help you – Le_Morri Mar 24 '14 at 16:52
  • @Fabian If they are only editing text, you should be able to cache the original HTML string and search it as text based against the selection to get the actual position you need to insert the annotation. – Harvey A. Ramer Mar 24 '14 at 17:06
  • @Le_Morri I don't the user selection position in pixels. I need the position within the text. – Fabian Mar 25 '14 at 09:41
  • @Fabian I never said so, but the fiddle (isn't mine) shows how to find out which text the user has selected. Which basically is what you want. – Le_Morri Mar 25 '14 at 09:45
  • @HarveyA.Ramer the users are not editing the text, they just annotate it and can add further information in a modal view. But we've one idea that we'll try. Searching and counting all chars recursive upwards outgoing from the selected text until the span or div element is reached. – Fabian Mar 25 '14 at 09:48
  • @Le_Morri as written in my post: "I know how to get selected text or how to add html to the selection or how to replace the selected text. " :) – Fabian Mar 25 '14 at 09:50
  • 1
    Why do you get "Lorem ipsum" from your database? ^^ – user436818 Mar 25 '14 at 10:06

2 Answers2

1

Did you try indexOf in javascript? Here is the Example 

<html id="html">
<body>

<span id="text-for-selection">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  <p>Aenean massa.</p>
  <p>Aenean massa.</p>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</span>


<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var str=document.getElementById('html').innerHTML;

var n=str.indexOf("Aenean massa.");
alert(n);
}
</script>

</body>
</html>

This is pure Javascript. You can use Jquery also

Sajitha Rathnayake
  • 1,688
  • 3
  • 26
  • 47
  • That is the best answer until now. But still there is the problem, what if I select the second "Aenean massa." the indexOf function will return the index of the first element. – Fabian Mar 25 '14 at 12:23
0

Would this be something you were looking for? http://code.google.com/p/rangy/wiki/RangySelection

user436818
  • 267
  • 1
  • 3
  • 11
  • The same with rangy - it returns only the position of the selected text within the element. – Fabian Mar 25 '14 at 10:42