我想知道两个文本节点是否在视觉上连续,无论html结构如何,即两行之间没有空行或任何其他元素。
我使用Ranges来获取矩形(大小和位置),但文本节点之间有间距(第一个矩形的底部与第二个矩形的顶部不匹配)。 / p>
我尝试根据line-height
和font-size
来计算这个间距,但我无法获得相同的值。
这是我尝试的JsFiddle: https://jsfiddle.net/3behsxxq/5/
有没有办法计算这个间距?
编辑: 在jsFiddle代码的第一种情况下,有四行('第一个文本','块','第二','文本块' )在视觉上是连续的,也就是说,它们之间的距离是相同的,但是我得到的数字相差7(在第一种情况下)。如果我尝试根据行高/字体大小与范围值之间的差异丢弃此空间,则它们不匹配,因此我无法抵消它。
已编辑2.上下文:
在下图中,6条线之间的距离相同。我寻找一种方法来确定它们是同一段落的一部分,无论html结构如何(因为html可以有一个<p>
元素或任何其他元素来表示段落。)
答案 0 :(得分:0)
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;
};