如何在 div 中查找单词的位置（y 坐标）答案

【问题标题】：How to find position of a word in a div (y coordinate)如何在 div 中查找单词的位置（y 坐标）
【发布时间】：2014-05-03 01:59:32
【问题描述】：

DIV 中有很多文本。我希望能够使用 PHP 正则表达式在字符串上搜索它，然后找到要搜索的该文本的 y 位置，以便我可以在它旁边放置一个图像。

我相信这是最好的方法，但我不确定。但是，我不知道如何确定该行距屏幕顶部有多少像素。有什么建议吗？

【问题讨论】：

Get cursor or text position in pixels for input element 的可能重复项
@user1524441 没有对你有用的答案吗？

标签： javascript jquery html

【解决方案1】：

@user1524441 不确定这是否是您的意思，但据我了解，您想在特定搜索词旁边添加图片，如果是这种情况，假设您使用的是 jquery，您可以使用以下方法：

var search = "Robin";
var text = $('.content').text();
$('.content').html(text.replace(search,'<span class="search-term" style="font-weight:bold;">' + search + '</span>'));
$('.search-term').before('<img src="url/goes/here" alt="" title=""/>');

这里是一个 jsfiddle，展示了它是如何工作的 http://jsfiddle.net/6YsfB/

【讨论】：

【解决方案2】：

您可以使用substring 和indexOf

var serch = "Robin"
var text = "hi my name is Robin, what you so talk? I'm god";

document.write(text.substring(text.indexOf(serch),text.indexOf(serch)+(serch).length));

http://jsfiddle.net/5bejQ/1/

【讨论】：

添加图像以突出显示文字的代码在哪里？我想你误解了这个问题......

【解决方案3】：

如果你在服务器上进行搜索，你可以输出找到的包含在标签中的带有特定 CSS 类的文本：

这是一些突出显示感兴趣的文本的文本。

然后，您可以将 CSS“内容”属性 (http://css-tricks.com/css-content/) 与 :before 或 :after 伪类结合使用，在突出显示的文本之前或之后显示图像。

【讨论】：