如何查找文本的绝对或相对位置或< br />在HTML？ [英] How to find absolute or relative position of text or <br /> in HTML?

问题描述

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

I was wondering if there is a way I could find the position of letters in HTML using Javascript or jQuery? I highly doubt this is possible, but it would make my life so much easier.

或者，有没有办法在HTML中使用JS查找< br /> 标记的位置？

Alternatively, Is there a way to find the position of <br /> tags in HTML using JS?

提前致谢。

推荐答案

正如tdammers所提到的，处理所有关于整理流程以处理你所建议的细节的细节都有许多细微差别可能需要解决，这取决于你正在做什么。

As tdammers mentions, handling all of the details of putting together a process to handle what you're suggesting has many nuances that may have to be addressed, depending on what you're doing.

你想要做的基本知识是：

The basics of what you're trying to do is:

1. 在想要找到位置的文本周围包裹一个元素，即文本的情况，可能是< span> 。


2. 获取 $ .offset（） 或 $。position（） 您添加的元素。无论你选择哪一个与你想要做的事情相关;第一个与文档相关，第二个与包含元素相关。

1. Wrap an element around the text you want to find the position for, ie, in the case of text, probably a <span>.
2. Get either the $.offset() or $.position() of the element or elements you added. Whichever you choose is relevant to what you're trying to do; the first is relevant to the document, the second to the containing element.

我创建了一个脚本的简单演示，使用 div s，使用 position：absolute 和 top / left 相对于段落中找到的条款的偏移量（位于< span> 围绕它们。）

I created a simple demo of a script to "highlight" a term typed into a textbox in several paragraphs using divs with position: absolute and top/left offsets relative to the terms found in the paragraphs (located by the <span> surrounding them).

注意，这只是一个演示（ $ .offset（））;它不是生产就绪的代码。在代码片段下面有一个实时小提琴演示的链接。

Note, this is only a demonstration (of $.offset()); it's not production-ready code. There's a link to the live fiddle demo below the code snippets.

首先，我创建了一个函数来查找并创建一个高亮显示< div>找到的每个术语。

First, I created a function to find and create a highlight <div> for each term found.

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（）事件：

Then, I attached a callback to the $.keyup() event:

$('#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/

这篇关于如何查找文本的绝对或相对位置或< br />在HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！