javascript - 在 Javascript 中计算嵌套元素中的文本选择偏移量

Question

问题

我正在尝试使用 javascript 从特定节点计算出选择的偏移量。

假设我有以下 HTML

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

如果我选择从blowing 到difficulty，它会给出与#text 的偏移量<strong> 内的节点.我需要从 <p> 开始的字符串偏移量的 innerHTML和选择的长度。在这种情况下，偏移量为 26，长度为 40。

我的第一个想法是用字符串偏移等做一些事情，但你可以很容易地得到类似的东西

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

这会破坏该方法，因为存在相同的节点。我还需要丢弃节点的选项。假设我有这样的东西

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

我想用 rel="inserted" 抛出一个元素当我进行计算时。我仍然想要 26 和 40 作为结果。

我在找什么

解决方案需要递归。如果有<span>用<strong>在其中，它仍然需要遍历到 <p> .

解决方案需要使用rel="inserted" 删除任何元素的长度.内容很重要，但标签本身并不重要。所有其他标签都很重要。当我执行所有这些操作时，我强烈不希望从 DOM 中删除任何元素。

我正在使用 document.getSelection()获取选择对象。这个解决方案只需要在 WebKit 中工作。 jQuery 是一个选项，但如果可能的话我宁愿没有它。

任何想法将不胜感激。

我无法控制执行所有这些操作的 HTML。

Answer 1

我想我解决了我的问题。我最终没有像最初计划的那样计算偏移量。我正在存储 block 中的“路径”(又名 <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"

现在我只需要扩展所有这些以支持选择的开始和结束。不过，这是一个很棒的构建基 block 。