javascript - 在 中滚动到给定字符串的第一次出现

Question

在我的 div 标签中，有很多行非常长的文本，并且 div 元素当前是可滚动的。我想要做的是找到特定字符串的第一次出现并自动滚动到包含该字符串的行。没有换行符或任何类型的字符串定界符，我可以使用它来轻松估计滚动位置。

我想我可以做这样的事情:

var max_chars_per_line = approximated max # of chars that can fit into one line;
var font_height = approximated font height in px;
var needle = string to look for;
var haystack = content in the <div> tag;
var index = haystack.indexOf(needle);
var num_lines_to_skip = index / max_chars_per_line;
my_div_tag.scrollTo(num_lines_to_skip * font_height);

我不禁想知道是否有更好的 (javascript/jQuery) 解决方案。我自己的尽职调查没有找到任何东西。

Answer 1

<p id="text">Lorem ipsum ... lots of text.... onion</p>

jQ:

var needle = 'onion';
$('#text').html($('#text').html().replace(needle, '<a id="imhere"></a>'+needle));
$('html,body').animate({scrollTop: $('#imhere').offset().top​}, 500);​​​​​​​​​​​​

演示 http://jsfiddle.net/vq7LD/