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

How to find absolute or relative position of text or <br /> in HTML?

本文关键字：lt br gt HTML 位置 文本 何找 相对      更新时间：2023-09-26

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

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

提前谢谢。

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

你想做的事情的基础是：

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

我创建了一个简单的脚本演示，使用div s在几个段落中"突出显示"键入文本框中的术语，其中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/

有一种更简单、更轻量级的方法（与其他建议覆盖的答案相比）可以找到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）

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

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

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

这仍然不是小事，因为你需要扫描HTML，并且你不想通过在不属于HTML的地方插入标签来破坏HTML——例如，如果你想匹配字符"d"，你不想把<div>变成<<span class="magic">d</span>iv>，因为这不是一个格式良好的HTML。

此外，根据浏览器处理紧排的方式，插入这些伪元素可能会略微改变布局。

在操作中：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;
}​
相关文章：