Calculating text selection offsets in nest elements in Javascript

Question

The Problem

I am trying to figure out the offset of a selection from a particular node with javascript.

Say I have the following HTML

Answer 1

I think I solved my issue. I ended not calculating the offset like I originally planned. I am storing the "path" from the chunk (aka <p>). Here is the code:

function isChunk(node) {
  if (node == undefined || node == null) {
    return false;
  }
  return node.nodeName == "P";
}

function pathToChunk(node) {
  var components = new Array();

  // While the last component isn't a chunk
  var found = false;
  while (found == false) {
    var childNodes = node.parentNode.childNodes;
    var children = new Array(childNodes.length);
    for (var i = 0; i < childNodes.length; i++) {
      children[i] = childNodes[i];
    }        
    components.unshift(children.indexOf(node));

    if (isChunk(node.parentNode) == true) {
      found = true
    } else {
      node = node.parentNode;
    }
  }

  return components.join("/");
}

function nodeAtPathFromChunk(chunk, path) {
  var components = path.split("/");
  var node = chunk;
  for (i in components) {
    var component = components[i];
    node = node.childNodes[component];
  }
  return node;
}

With all of that, you can do something like this:

var p = document.getElementsByTagName('p')[0];
var piece = nodeAtPathFromChunk(p, "1/0"); // returns desired node
var path = pathToChunk(piece); // returns "1/0"

Now I just need to expand all of that to support the beginning and the end of a selection. This is a great building block though.

Answer 2

Just check if your selected element is a paragraph, and if not use something like Prototype's Element.up() method to select the first paragraph parent.

For example:

if(selected_element.nodeName != 'P') {
  parent_paragraph = $(selected_element).up('p');
}

Then just find the difference between the parent_paragraph's text offset and your selected_element's text offset.

Answer 3

Maybe you could use the jQuery selectors to ignore the rel="inserted"?

$('a[rel!=inserted]').doSomething();

http://api.jquery.com/attribute-not-equal-selector/

What code are you using now to select from blowing to difficulty?

Answer 4

What does this offset actually mean? An offset within the innerHTML of an element is going to be extremely fragile: any insertion of a new node or change to an attribute of an element preceding the point in the document the offset represents is going to make that offset invalid.

I strongly recommend using the browser's built-in support for this in the form of DOM Range. You can get hold of a range representing the current selection as follows:

var range = window.getSelection().getRangeAt(0);

If you're going to be manipulating the DOM based on this offset that you want, you're best off doing so using nodes instead of string representations of those nodes.

Answer 5

you can use the following java script code:

var text = window.getSelection();
var start = text.anchorOffset;
alert(start);
var end = text.focusOffset - text.anchorOffset;
alert(end);