你想要做的事情的基本内容是：

1. 将要查找的位置的元素环绕在文本周围(在文本的情况下，可能是<span>。
2. 要么获得$.offset()或$.position()添加的一个或多个元素。无论您选择哪一种，都与您想要做的事情相关；第一种是与document，第二个到包含元素。

我创建了一个脚本的简单演示，以“突出显示”在几个段落中输入到文本框中的术语。

注意，这只是一个演示$.offset())；它不是可以生产的代码。

首先，我创建了一个函数来查找和创建一个突出显示。<div>每找到一个词。

function highlightWordPositions(word) {
    var $paras = $('p'),
        $spans,
        _top = 0,
        _left = 0;

    $paras.each(function(){
        var $p = $(this),
            regex = new RegExp(word, 'g');

        $p.html($p.text().replace(regex, '<span>' + word + '</span>'));
        $spans = $p.find('span');

        $spans.each(function(){
            var $span = $(this),
                $offset = $span.offset(),
                $overlay = $('<div class="overlay"/>');

            $overlay
                .offset($offset)
                .css({
                    width: $span.innerWidth(),
                    height: $span.innerHeight()
                }).show();

            $(document.body).append($overlay);
        });
    });
}

然后，我将一个回调附加到$.keyup()活动：

$('#term').keyup(function(event){
    var term = this.value;

    if (term == '') {
        $('.overlay').remove();
        return false;
    } else if (term.indexOf(' ') != -1) {
        this.value = term.replace(' ', '');
        return false;
    }

    $('.overlay').remove();

    highlightWordPositions(term);
});

http：/jsfiddle.net/JaN 75/

有一种更简单、更轻量级的方法(相对于其他建议覆盖的答案)来查找DOM元素中字母的位置：

// returns { left, top, etc } in px
function getLetterPositions(myElementWithText, myTextElementIndex, myLetterPosition) {
    var range = document.createRange();
    range.setStart(myElementWithText.childNodes[myTextElementIndex], myLetterPosition);
    range.setEnd(myElementWithText.childNodes[myTextElementIndex], myLetterPosition+1);
    return range.getBoundingClientRect();
}

• 包含目标字母的文本的元素是myElementWithText(例如<div>)
• 带有文本的元素子元素(即textNode)在索引处myTextElementIndex(在大多数情况下，0)
• 你要找的那封信的位置是myLetterPosition(例如，如果文本是"abcd"你想要"c"，这将是2)