如何在HTML中找到文本或<br />的绝对或相对位置？

Question

我想知道是否有一种方法可以使用Javascript或jQuery在HTML中找到字母的位置？我非常怀疑这是可能的,但它会让我的生活变得如此简单.

或者,有没有办法<br />使用JS在HTML中找到标签的位置？

提前致谢.

Answer 1

正如tdammers所提到的那样,处理所有细节来整理一个处理你所建议的过程的细节有许多细微差别可能需要解决,这取决于你正在做什么.

您要做的事情的基础是:

1. 在要查找位置的文本周围包裹一个元素,即在文本的情况下,可能是a <span>.
2. 获取任一$.offset()或$.position()添加的元素或元素.无论你选择哪一个与你想要做的事情相关; 第一个document与包含元素相关,第二个与包含元素相关.

我创建了一个脚本的简单演示,用于"突出显示"在几个段落中键入文本框的术语,使用divs position: absolute和top/或left相对于段落中找到的术语(位于<span>周围的部分).

注意,这只是一个演示(的$.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/JaN75/