javascript - jQuery/Javascript 检查文本重叠

Question

我想知道有没有什么好的方法可以检查两个html元素的文本是否重叠？ Carification:检查元素之间的重叠没有问题我想检查 2 个元素内的实际文本是否重叠。

假设我有元素

<span id="green">Green is my cÔlor</span>
<span id="blue">blue is my color</span>

我如何检查这两个元素的文本是否重叠？ 我们可以假设我可以访问给定元素的 jQuery 对象。

编辑: 我想说的是，我可以检测元素的边界是否相交，但在文本的情况下，每个字符上方和下方的大部分空间可能是“未使用的”。

Answer 1

function getPositions(elem) {
    var clientRect = elem.getBoundingClientRect();
    return [
        [ clientRect.left, clientRect.left + clientRect.width ],
        [ clientRect.top, clientRect.top + clientRect.height ]
    ];
}


function intersect(elemA, elemB) {
    var posA = getPositions(elemA),
        posB = getPositions(elemB),
        isOverlap = false;

    if (posA[0][0] < posB[0][1] && posA[0][1] > posB[0][0] &&
        posA[1][0] < posB[1][1] && posA[1][1] > posB[1][0])
        isOverlap = true;

    return isOverlap;
}