如何知道两个文本节点是否在视觉上是连续的

Question

我想知道两个文本节点是否在视觉上连续,无论html结构如何,即两者之间没有空行或任何其他元素.

我正在使用范围来获取矩形(大小和位置),但文本节点之间有一个间距(第一个矩形的底部与第二个矩形的顶部不匹配).

我试图根据line-height和计算这个间距,font-size但我得不到相同的值.

这是我尝试的JsFiddle:https://jsfiddle.net/3behsxxq/5/

有没有办法计算这个间距？

编辑: 在jsFiddle代码的第一种情况下,有四行('第一个文本','块','第二','文本块')在视觉上是连续的,也就是说,它们之间的距离是相同的,但我得到的数字相差7(在第一种情况下).如果我尝试根据line-height/font-size与范围值之间的差异丢弃此空间,则它们不匹配,因此我无法抵消它.

Answer 1

var extractTextNodes = function(paragraph) {
  var nodes = [];
  function callback(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      nodes.push(node);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      node.childNodes.forEach(callback);
    }
  }
  paragraph.childNodes.forEach(callback);
  return nodes;
};

var findParentParagraph = function(node) {
  var parent = node.parentElement;
  while (parent) {
    if (parent.tagName === "P") {
      return parent;
    }
    parent = parent.parentElement;
  }

  return null;
};

var areTextNodesSiblings = function(textNode1, textNode2) {
  var p = findParentParagraph(textNode1);
  if (!p) {
    return false;
  }

  var allTextNodes = extractTextNodes(p);
  var index1 = allTextNodes.indexOf(textNode1);
  var index2 = allTextNodes.indexOf(textNode2);
  if (index2 === -1) {
    return false;
  }
  return (index1 === index2 - 1) || (index1 === index2 + 1);
};

只需areTextNodesSiblings通过传递节点来调用即可。

小提琴： https: //jsfiddle.net/krmnve37/1/

标题说“视觉上连续”，但“编辑2.上下文”表示节点必须位于同一段落中。以下函数将检查两个节点是否位于同一段落中，而不是它们是否彼此相邻：

var areTextNodesInTheSameParagraph = function(textNode1, textNode2) {
  var p = findParentParagraph(textNode1);
  if (!p) {
    return false;
  }

  var allTextNodes = extractTextNodes(p);
  var index1 = allTextNodes.indexOf(textNode1);
  var index2 = allTextNodes.indexOf(textNode2);
  return index1 > -1 || index2 > -1;
};