jquery - 获取字符在特定索引处的位置

Question

我想找出一个字符在 div 中的位置。

例如

<div>This is a very long multi-line text that overflows and wraps<div>

我想在位置 24(即“-”)找到字符的绝对 x 和 y 位置。这可能吗？

Answer 1

这是一种在纯 J​​avaScript 中获取文本偏移位置的方法，无需使用元素包装文本:

var characters = document.querySelector('.characters');
var charactersText = characters.textContent;
var charAtIndex = 25;
var offsetPosition;

characters.textContent = '';
for (var i = 0; i < charactersText.length; i++) {
    var textNode = document.createTextNode(charactersText[i]);
    characters.appendChild(textNode);
    if (i === charAtIndex) {
        var range = document.createRange();
        range.selectNodeContents(textNode);
        var rects = range.getClientRects();
        offsetPosition = {
            left: rects[0].left,
            top: rects[0].top
        };
    }
}

alert(JSON.stringify(offsetPosition, null, 2));

<div class="characters">This is a very long multi-line text that overflows and wraps</div>