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

Question

我想知道是否有一种方法可以使用 Javascript 或 jQuery 在 HTML 中找到字母的位置？我非常怀疑这是可能的，但它会让我的生活变得更加轻松。

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

提前致谢。

Answer 1

正如 tdammers 所提到的，处理将流程组合在一起以处理您所建议的内容的所有细节有许多可能需要解决的细微差别，具体取决于您正在做的事情。

你要做的事情的基础是:

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

我创建了一个简单的脚本演示，使用 div 来“突出显示”在多个段落中输入到文本框中的术语。与 position: absolute和 top/left相对于段落中找到的术语的偏移量(位于它们周围的 <span>)。

请注意，这只是一个演示($.offset())；它不是生产就绪代码。代码片段下方有指向现场 fiddle 演示的链接。

首先，我创建了一个函数来查找和创建高亮显示 <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/