如何在HTML中找到文本或的绝对或相对位置？
我想知道是否有一种方法可以使用Javascript或jQuery在HTML中找到字母的位置？ 我非常怀疑这是可能的，但它会让我的生活变得更加轻松。
或者，有没有办法使用JS在HTML中找到
提前致谢。
正如tdammers所提到的那样，处理所有关于处理你所建议的过程的细节有许多细微差别可能需要解决，这取决于你正在做什么。
你要做的事情的基础是：
- 在要找到位置的文本周围包裹一个元素，例如，在文本的情况下，可能是
。 - 获取您添加的元素或元素的
$.offset()或$.position()。 无论您选择哪个与您想要做的事情相关; 第一个与document相关，第二个与包含元素相关。
我创建了一个脚本的简单演示，用于“突出显示”在几个段落中键入文本框的术语，使用div position: absolute和top / left偏移相对于段落中找到的术语（由围绕它们定位） ）。
注意，这只是一个演示（ $.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, '' + word + '')); $spans = $p.find('span'); $spans.each(function(){ var $span = $(this), $offset = $span.offset(), $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); });
假设您指的是屏幕上显示字符的位置，以像素为单位：
jQuery或DOM不会在对象模型中对单个字符进行建模，因此您无法直接读取字符的位置。
我能想到的最好的方法是在角色之前（或之后）插入一个虚拟元素，例如带有特殊类的零宽度跨度，然后得到它的位置。 或者，您可以将角色包裹在这样一个特殊元素中，然后获取包装器的位置，宽度，高度等。
它仍然不是微不足道的，因为你需要扫描HTML，并且你不想通过在不属于它们的地方插入标记来破坏HTML – 例如，如果你想匹配字符’d’，你就不要我想将
转换为<div> ，因为这不是格式良好的HTML。
此外，插入这些虚拟元素可能会稍微改变布局，具体取决于浏览器处理字距调整的方式。
在行动： http ： //jsfiddle.net/WKgWM/
HTML：
Percussus ait in fuerat construeret cena reges undis effugere quod una.
JS：
var selection = "dis"; var spn = ''+selection+''; $("p").html($("p").html().replace(selection,spn));
CSS：
.selected{ background-color:#FF00FF; }
有一种更简单，更轻量级的方法（相对于建议覆盖的其他答案），可以在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（例如 - 带有文本的元素子元素（即
textNode）位于索引myTextElementIndex（大多数情况下为0） - 你试图找到的信的位置是
myLetterPosition（例如，如果文本是"abcd"而你想要"c"，那么这将是2）