在JavaScript中计算嵌套元素中的文本选择偏移量 [英] Calculating text selection offsets in nest elements in Javascript

问题描述

问题

我正试图通过javascript找出特定节点的选择偏移。

说我有以下HTML

 < p>你好。这个< strong>正在吹我的头脑< / strong>有困难。< / p> 
  

如果我从吹选择难度 ，它给了我从< strong> 之内的 #text 节点的偏移量。我需要从< p> 的 innerHTML 中的字符串偏移量和选择的长度。在这种情况下，偏移量将为26，长度将为40。

我的第一个想法是使用字符串偏移等进行某些操作，但是您可以轻松拥有某些东西像

 < p>你好。这个< strong>是真棒< / strong>。真的。它< strong>是真棒< / strong>。< / p> 
  

这将破坏该方法，因为有相同的节点。我还需要选择抛出节点。说我有这样的东西

 < p>你好。 < a href =＃ =inserted>此< strong>正在吹送< / a>我的头脑< / strong>有困难。< / p> 
  

我想用 rel =inserted code>当我做计算。我仍然想要26和40结果。

我在寻找什么

解决方案需要递归。如果< span> 中有一个< strong> ，那么它仍然需要遍历< p> 。

解决方案需要删除任何元素的长度的rel = 插入。内容很重要，但标签本身并不重要。所有其他标签都很重要。我非常希望在执行所有这些操作时不要从DOM中删除任何元素。

我正在使用 document.getSelection（）获取选择对象。此解决方案只能在WebKit中工作。 jQuery是一个选项，但如果可能，我更喜欢它。

任何想法都将不胜感激。

我无法控制HTML，

解决方案

我想我解决了我的问题。我最终没有按照原计划计算偏移量。我正在从块（aka < p> ）存储路径。这是代码：

 函数isChunk（node）{
 if（node == undefined || node == null）{
 return false; 
} 
 return node.nodeName ==P; 
} 
 
函数pathToChunk（node）{
 var components = new Array（）; 
 
 //最后一个组件不是块
 var found = false; 
 while（found == false）{
 var childNodes = node.parentNode.childNodes; 
 var children = new Array（childNodes.length）; （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（/）; 
} 
 
函数nodeAtPathFromChunk（chunk，path）{
 var components = path.split（/）; 
 var node = chunk; 
 for（i in components）{
 var component = components [i]; 
 node = node.childNodes [component]; 
} 
返回节点; 
} 
  

所有这些，你可以这样做：

  var p = document.getElementsByTagName（'p'）[0]; 
 var piece = nodeAtPathFromChunk（p，1/0）; //返回所需的节点
 var path = pathToChunk（piece）; //返回1/0
  

现在我只需要扩展所有这些来支持开始和选择的结束。这是一个很棒的构建块。

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

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

If I select from blowing to difficulty, it gives me the offset from the #text node inside of the <strong>. I need the string offset from the <p>'s innerHTML and the length of the selection. In this case, the offset would be 26 and the length would be 40.

My first thought was to do something with string 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 would break that method because there are identical nodes. I also need the option to throw out 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 an elements with rel="inserted" when I do the calculation. I still want 26 and 40 as the result.

What I'm looking for

The solution needs to be recursive. If there was a <span> with a <strong> in it, it would still need to traverse to the <p>.

The solution needs to remove the length of any element with rel="inserted". The contents are important, but the tags themselves are not. All other tags are important. I'd strongly prefer not to remove any elements from the DOM when I do all of this.

I am using document.getSelection() to get the selection object. This solution only has to work in WebKit. jQuery is an option, but I'd prefer to it without it if possible.

Any ideas would be greatly appreciated.

I have no control over the HTML I doing all of this on.

解决方案

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.

这篇关于在JavaScript中计算嵌套元素中的文本选择偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！