Geek Answers Handbook

Computing text selection offsets in socket elements in Javascript

Problem

I am trying to figure out the selection offset from a specific node using javascript.

Let's say I have the following HTML

<p>Hi there. This <strong>is blowing my mind</strong> with difficulty.</p>

If I choose from a breath to difficulties, it gives me an offset from the #textnode inside <strong>. I need a line offset from <p> innerHTMLand a selection length. In this case, the offset will be 26, and the length will be 40.

My first thought was to do something with line offsets, etc., but you could easily have something like

<p> Hi there. This <strong>is awesome</strong>. For real. It <strong>is awesome</strong>.</p>

which will violate this method because there are identical nodes. I also need the option of ejecting nodes. Say I have something like this

<p>Hi there. <a href="#" rel="inserted">This <strong>is blowing</a> my mind</strong> with difficulty.</p>

I want to throw out the elements with rel="inserted"when I do the calculation. I still want to get the result 26 and 40.

What i'm looking for

. <span> <strong>, <p>.

rel="inserted". , . . - DOM, .

document.getSelection() . WebKit. jQuery - , , .

.

HTML, .

+5
5

? innerHTML : node , , , .

DOM Range. , , :

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

DOM , , , .

+3

, . , . "" (aka <p>). :

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;
}

- :

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

, . .

+3

java script:

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

, , - Prototype Element.up(), .

:

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

parent_paragraph selected_element.

-1
source

Perhaps you could use the jQuery selector to ignore rel = "inserted"?

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

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

What code are you using now to choose from a breath to difficulties?

-3
source

More articles:


All Articles