Javascript 使用jQuery搜索并滚动到div中的文本
我想搜索并滚动到该位置，获取文本并更改其颜色，就像Chrome CTRL+F功能一样（下一个和上一个）。但它不在其div的浏览器窗口中Javascript 使用jQuery搜索并滚动到div中的文本,javascript,jquery,html,Javascript,Jquery,Html,我想搜索并滚动到该位置，获取文本并更改其颜色，就像Chrome CTRL+F功能一样（下一个和上一个）。但它不在其div的浏览器窗口中 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script ty
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function searchText(text){
var pattern = new RegExp(text,"g");
var totalMatchCount = ($('#Test').text().match(pattern) || []).length;
console.log($("div:contains('" + text + "').eq(4)"));
for(var i=0;i<totalMatchCount;i++){
if(i==5){
$('#Test').scrollTop($("div:contains('" + text + "'):eq(5)").offset());
}
}
}
</script>
</head>
<body>
<div id="Test" style="width: 700px;height: 150px;overflow: scroll;">
2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))<BR>
2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))<BR>
2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))<BR>
2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))<BR>
2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))<BR>
2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))<BR>
2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))<BR>
2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))<BR>
2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))<BR>
2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))<BR>
2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))<BR>
2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))<BR>
2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))<BR>
2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))<BR>
2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))<BR>
2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))<BR>
</div>
<button onclick="searchText('WARN')">Search</button>
</body>
</html>
函数搜索文本（文本）{
var模式=新的RegExp（文本，“g”）；
var totalMatchCount=（$（'#Test'）.text（）.match（pattern）| |[]）.length；
log（$（$div:contains（“+text+”）.eq（4）”）；
对于（var i=0；i而言，我在评论中提到的问题是div:contains（WARN）
只返回div，因为只有一个div带有WARN。一种方法是将每一行包装在一个单独的div
中，以便您可以使用jQuery进行选择。下面的代码几乎适用于issue。第五行不完全可见：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
#Test{
position:relative;
}
</style>
<script type="text/javascript">
function searchText(text) {
var scrollTop = $('#Test').scrollTop();
var pos= $("div:contains('" + text + "'):eq(5)").position();
$('#Test').scrollTop(scrollTop+pos.top);
}
</script>
</head>
<body>
<div id="Test" style="width: 700px;height: 150px;overflow: scroll;">
<div>2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:01:00,062 WARN [] (Thread-1169 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:02:00,026 WARN [] (Thread-1165 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:03:00,049 WARN [] (Thread-1180 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:04:00,029 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
<div>2015-11-05 22:05:00,031 WARN [] (Thread-1185 (-client-global-threads-643998766))</div>
</div>
<button onclick="searchText('WARN')">Search</button>
</body>
</html>
#试验{
位置：相对位置；
}
函数搜索文本（文本）{
var scrollTop=$（'#Test'）。scrollTop（）；
var pos=$（“div:contains（“+text+”）：eq（5）”）.position（）；
$（'#Test'）.scrollTop（scrollTop+pos.top）；
}
2015-11-05 22:01:00062警告[]（线程-1169（-client-global-threads-643998766））
2015-11-05 22:02:00026警告[]（线程-1165（-client-global-threads-643998766））
2015-11-05 22:03:00049警告[]（线程-1180（-client-global-threads-643998766））
2015-11-05 22:04:00029警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:05:00031警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:01:00062警告[]（线程-1169（-client-global-threads-643998766））
2015-11-05 22:02:00026警告[]（线程-1165（-client-global-threads-643998766））
2015-11-05 22:03:00049警告[]（线程-1180（-client-global-threads-643998766））
2015-11-05 22:04:00029警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:05:00031警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:01:00062警告[]（线程-1169（-client-global-threads-643998766））
2015-11-05 22:02:00026警告[]（线程-1165（-client-global-threads-643998766））
2015-11-05 22:03:00049警告[]（线程-1180（-client-global-threads-643998766））
2015-11-05 22:04:00029警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:05:00031警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:01:00062警告[]（线程-1169（-client-global-threads-643998766））
2015-11-05 22:02:00026警告[]（线程-1165（-client-global-threads-643998766））
2015-11-05 22:03:00049警告[]（线程-1180（-client-global-threads-643998766））
2015-11-05 22:04:00029警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:05:00031警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:01:00062警告[]（线程-1169（-client-global-threads-643998766））
2015-11-05 22:02:00026警告[]（线程-1165（-client-global-threads-643998766））
2015-11-05 22:03:00049警告[]（线程-1180（-client-global-threads-643998766））
2015-11-05 22:04:00029警告[]（线程-1185（-client-global-threads-643998766））
2015-11-05 22:05:00031警告[]（线程-1185（-client-global-threads-643998766））
搜寻
请注意，您需要使用方法position（）
（而不是offset（）
）来获取行的正确位置
请查看以下内容：）。在本演示中，每次单击“搜索”时，下一个匹配行都会显示在顶部。这有助于理解技巧。在段落中查找所有匹配的文本，并将其包装在范围内并设置样式
$(document).ready(function(){
$("#Test").html(function(_, html){
return html.replace(/WARN/g, '<span class="red">WARN</span>');
});
});
$（文档）.ready（函数（）{
$（“#测试”）.html（函数（#，html）{
返回html.replace（/WARN/g，'WARN'）；
});
});
更新
创建一个输入字段以查找div中的文本。一旦文本在span中换行，则可以将其展开，以便在span中搜索并换行另一个文本
div:contains（警告）
只返回一个div。它不会返回此div中带有警告的行数
我不希望搜索到的文本一次被替换，我希望在按下Ctrl+F键时，像chrome中的下一个和上一个功能一样，下一个和上一个功能现在附带了工作演示示例。只需将其展开即可xt来自span一旦你想搜索另一个感谢Basheer，它的工作如预期，但缺少一件事，那就是滚动到搜索到的文本。我们如何才能做到这一点。我使用它的日志文件它的巨大，所以我不想添加div到每一行有没有更好的解决方案？