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

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

或者，是否有一种方法可以使用JS在HTML中找到

标记的位置

---

提前感谢。

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

jQuery或DOM不会在其对象模型中为单个角色建模，因此无法直接读取角色的位置

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

这仍然不是一件小事，因为您需要扫描HTML，并且您不希望通过在不属于HTML的位置插入标记来破坏HTML—例如，如果您希望匹配字符“d”，则不希望将

转换为

，因为这不是格式良好的HTML

---

此外，插入这些虚拟元素可能会略微改变布局，这取决于浏览器处理紧排的方式。

正如tdammers所提到的，处理一个过程的所有细节以处理您建议的内容有许多细微差别，可能必须加以解决，这取决于您正在做什么

您要做的基本工作是：

在要查找位置的文本周围环绕一个元素，例如，对于文本，可能是

获取您添加的一个或多个元素的或。无论你选择哪一个都与你想做的事情有关；第一个与

文档相关，第二个与包含元素相关

我创建了一个简单的脚本演示，使用

div

s和

position:absolute

和

top

/

相对于在段落中找到的术语（位于它们周围的
位置）在文本框中“突出显示”键入的术语

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

首先，我创建了一个函数来查找并为找到的每个术语创建一个突出显示

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);
        });
    });
}

正在运行：

html:

有一种更简单、更轻量级的方法（与其他建议覆盖的答案相比）来查找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
（例如a
）
包含文本的元素子元素（即
textNode
）位于索引
myTextElementIndex
（在大多数情况下，0）
您试图查找的字母的位置是
myLetterPosition
（例如，如果文本是
“abcd”
，而您想要
“c”
，则这将是2）
您必须定义“字母在html中的位置”的含义。关于它们在屏幕上的显示方式？描述你正在努力实现的目标，而不是你认为你必须如何实现它。你所说的职位到底是什么意思？索引或什么，在什么上下文/父上下文中？您可以使用javascript或jquery获取元素，使用标记获取元素。使用jquery，您可以很容易地找到它的位置@Roozbeh15哇。。。这真是太神奇了！有没有更好的解决办法？考虑到这个答案已经有一年多的历史了。@Cybrix-这实际上还不到一年（2012年）。我想你需要定义“更好”。您可以用附加的标记来包装它，就像mgraph的例子一样。@JaredFarrish，噢，事实上它一点也不老。我不知道我在读什么。我想的是一种避免把每一个字都包装起来的方法。也许使用单间距字体并进行一些计算。但我怀疑我们能否避免手动循环使用这些词来提取其“大小”并将其存储在某个地方。这项任务可能会遇到很多麻烦（对于浏览器而言），需要使用大量的单词，然后按照您的解决方案进行包装。这项任务很旧，现在只需使用范围
<p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>​

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

.selected{
  background-color:#FF00FF;
}​

// 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();
}