科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Search and scroll to the text in div using jQuery - Stack Overflow

    javascript - Search and scroll to the text in div using jQuery - Stack Overflow

    programmeradmin1浏览0评论

    I want to search and scroll to the location and get the text and changes its color just like Chrome CTRL+F feature (Next and Previous). But it is not on browser window its on div. I tried the following

        <!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src=".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>

    In the above code I am searching word WARN and when you click on the button div has to scroll 5th index of the WARN in div. But it's not working as expected.

    I want to search and scroll to the location and get the text and changes its color just like Chrome CTRL+F feature (Next and Previous). But it is not on browser window its on div. I tried the following

        <!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="http://code.jquery./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>

    In the above code I am searching word WARN and when you click on the button div has to scroll 5th index of the WARN in div. But it's not working as expected.

    • javascript
    • jquery
    • html
    Share edited Aug 9, 2017 at 23:33 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Nov 7, 2015 at 10:40 user1188867user1188867 4,0085 gold badges46 silver badges72 bronze badges 1
    • div:contains(WARN) returns only one div. It does not return the number of lines with WARN inside this div – Ganesh Kumar Commented Nov 7, 2015 at 13:50
    Add a ment  | 

    2 Answers 2

    Reset to default 3

    Find all matching text within paragraph and wrap it within span and style it

     $(document).ready(function(){
     $("#Test").html(function(_, html){
        return html.replace(/WARN/g, '<span class="red">WARN</span>');   
     });
 });

    Update

    Create an input field to find text in div. Once the text is wrapped within span then you can unwrap it back for another text to search and wrap that one within span.

    Complete Demo

    The issue is, which I mentioned in the ment, is that div:contains(WARN) returns you only div, because there is only one div with WARN. One way is to wrap each line within a separate div so that you can select it using jQuery. Here is the code almost works with issue. The 5th row is not pletely visible:

    <!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="http://code.jquery./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>

    Note that you need to use the method position() (not offset()) to get the correct position of the line.

    Check this plunker out for some extra stuff :). In this demo, every time you click on search, the next matching row is brought to the top. This post is helpful in understanding the trick.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论