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

【问题标题】：How to find absolute or relative position of text or <br /> in HTML?如何在 HTML 中查找文本或 <br /> 的绝对或相对位置？
【发布时间】：2012-02-11 09:54:41
【问题描述】：

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

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

提前致谢。

【问题讨论】：

您将不得不定义“html 中字母的位置”的含义。关于它们如何在屏幕上显示？描述你想要达到的目标，而不是你认为你必须如何实现它。
职位到底是什么意思？索引或什么以及在什么上下文/父级？
您可以使用 javascript 或 jquery 获取您的元素，使用标签获取它们。并且使用 jquery 你可以很容易地找到它的位置。 api.jquery.com/position
stackoverflow.com/questions/5143534/…
@Roozbeh15 jsfiddle.net/WKgWM

标签： javascript jquery html

【解决方案1】：

正如 tdammers 所提到的，在处理您所建议的内容的过程中处理所有细节可能需要解决许多细微差别，具体取决于您正在做什么。

您尝试做的基本操作是：

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

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

注意，这只是一个演示（$.offset()）；它不是生产就绪的代码。在代码 sn-ps 下方有一个现场小提琴演示的链接。

首先，我创建了一个函数来查找并为找到的每个术语创建一个突出显示<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/

【讨论】：

哇...这太棒了！
有没有更好的解决方案？考虑到这个答案已经超过一年了。
@Cybrix - 这实际上还不到一岁（2012 年）。我想你需要定义“更好”。你可以用额外的标记来包装它，比如 mgraph 的例子。
@JaredFarrish，哎呀，它确实一点也不旧。我不知道我在读什么。我想到的是一种避免包装每个单词的方法。也许使用等宽字体并进行一些计算。但我怀疑我们是否可以避免手动循环遍历单词以提取它的“大小”并将其存储在某个地方。这项任务（对于浏览器而言）可能很麻烦，有很多单词，然后像您的解决方案建议的那样包装它们。
这是旧的，现在只使用 Range

【解决方案2】：

有一种更简单、更轻量级的方法（与其他建议叠加的答案相比）来查找 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）

【讨论】：

【解决方案3】：

假设您的意思是字符在屏幕上显示的位置，以像素为单位：

jQuery 或 DOM 不会在其对象模型中对单个字符进行建模，因此您无法直接读取字符的位置。

我能想到的最好方法是在字符之前（或之后）插入一个虚拟元素，例如具有特殊类的零宽度跨度，然后获取其位置。或者，您可以将字符包裹在这样一个特殊元素中，然后获取包裹器的位置、宽度、高度等。

这仍然不是微不足道的，因为您需要扫描 HTML，并且您不想通过在不属于它们的位置插入标签来破坏 HTML - 例如，如果您想匹配字符 'd'，你不想把<div> 变成<<span class="magic">d</span>iv>，因为那不是格式良好的HTML。

此外，插入这些虚拟元素可能会稍微改变布局，具体取决于浏览器如何处理字距调整。

【讨论】：

【解决方案4】：

在行动：http://jsfiddle.net/WKgWM/

html:

<p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>

js:

var selection = "dis";
var spn = '<span class="selected">'+selection+'</span>';
$("p").html($("p").html().replace(selection,spn));

css:

.selected{
  background-color:#FF00FF;
}

【讨论】：