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

【问题标题】：How to know if two text nodes are visually consecutive如何知道两个文本节点是否在视觉上是连续的
【发布时间】：2017-01-09 19:42:04
【问题描述】：

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

我使用Ranges 获取矩形（大小和位置），但文本节点之间存在间距（第一个矩形的底部与第二个矩形的顶部不匹配）。

我尝试根据line-height 和font-size 计算此间距，但无法得到相同的值。

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

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

已编辑： 在jsFiddle代码的第一种情况下，有四行（'first text', 'block', 'second', 'text block'）在视觉上是连续的，也就是说，视觉上它们之间的距离是相同的，但是我得到的数字相差 7（在第一种情况下）。如果我尝试根据 line-height/font-size 和范围值之间的差异来丢弃这个空间，它们不匹配，因此我无法抵消它。

已编辑 2. 背景： 在下图中，6 条线之间的距离相同。我寻找一种方法来确定它们是同一段落的一部分，而不管 html 结构如何（因为 html 可能有一个 <p> 元素或任何其他元素来表示该段落）。

【问题讨论】：

我认为这里的部分困难在于以像素为单位的字体大小与从最高上升点（通常为 d、b、l 等）到最低下降点（p , q)。这个图形设计问题的答案很有帮助：graphicdesign.stackexchange.com/questions/4035/…
你知道矩形之间的间距小于line-height和font-size的差就够了吗？
这是一个相关的问题，展示了如何使用 jQuery 来determine the vertical distance from the top of the screen to the top of an element。您应该能够将它与元素的高度结合使用，以确定第二个元素从第一个元素的底部开始的距离。
@jcbp 你想要两个文本节点之间的距离。您的问题不清楚，请详细说明。
即使两个元素在视觉上是连续的，如果有另一个元素通过 CSS 相对或绝对定位与它们重叠怎么办？

标签： javascript css form-control

【解决方案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/

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

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

【讨论】：