Search and scroll to the text in div using jQuery

Question

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.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>

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.

`div:contains(WARN)` returns only one div. It does not return the number of lines with WARN inside this `div` — Ganesh Kumar, Nov 07 '15 at 13:50

Basheer Kharoti · Accepted Answer · 2015-11-10T11:10:17.403

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

edited Nov 10 '15 at 11:10

answered Nov 07 '15 at 14:54

Basheer Kharoti

4,202
5
24
50

I don't want searched text to get replaced at a time I want it one by one like next and previous functionality in chrome when we press Ctrl+f – user1188867 Nov 07 '15 at 17:15
The next and previous functionality is now attached with working demo example. Just unwrap it the text from span once you want to search for another – Basheer Kharoti Nov 08 '15 at 05:43
Thanks Basheer, its working as expected but one thing is missing that is scroll to that searched text. How can we do that. – user1188867 Nov 09 '15 at 04:35

score 1 · Answer 2 · edited May 23 '17 at 12:23

The issue is, which I mentioned in the comment, 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 completely visible:

<!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>

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.

I am using it for log files its huge so I don't want to add div to each and every line is there any better solution ? — user1188867, Nov 07 '15 at 17:17

Search and scroll to the text in div using jQuery

2 Answers2