Preface

Probably I should start this blog post with a big disclaimer, because so far doing anything with JavaScript to me was like entering a world of pain (sorry, but the movie reference is a must). Furthermore I see a really huge risk here that some of my collegues – those who really know how to code JavaScript – will be tearing this blog post apart. But anyway I will share my experiences in solving the above mentioned problem which is: “Search for some text in a HTML page and then jump to the first occurence of that text found.”

Maybe the worst thing of all is that all this is happening during a fun project of mine and therefore – so to say – doing some JavaScript here was my free will. Well, my usual solution to any JavaScript-related question is: Google or my colleague Fabian. But somehow this time I did not really find a satisfying answer with Google and did not want to bother anyone with this. Thus I ended up reading the W3School’s JavaScript Tutorial. (Edited 16.11.2013: Please see comment in the comments section below on W3School.)

The Problem in Detail

The problem to solve can be best shown by example. I am pretty sure it should be relatively easy to apply the solution to this on similar problems then. The webpage to be searched lists technical phrases in english language, gives a translation into german and adds a short explanation to each term. Using Bootstrap for this it happended that the web page contains entries like the following (quite a lot of them):

1<div class="row" id="graphic_board">
2   <div class="col-md-2">
3      <p><b>graphic board</b></p>
4   </div>
5   <div class="col-md-3">
6      <p><i>Grafikkarte</i></p>
7   </div>
8   <div class="col-md-7">
9      <p>Some short description here ...</p>
10   </div>
11</div>

So the task is to search through a whole lot of such entries and then jump to that section which is defined by the id-field of the first div-element when the search-string has been found.

Of course some kind of search-form is required, which could look like this for example:

1<form id="searchForm" action="javascript:search();">
2   <div class="input-group">
3      <button id="go" class="btn btn-default" type="button" 
4              onclick="document.getElementById('searchForm').submit(); return false;">
5      </button>
6      <input type="text" id="searchItem" class="form-control" placeholder="Suchbegriff">
7   </div>
8</form>

It is a rather simple HTML-form that can be used to enter the search-string and to then submitting the form. On submitting the form the action to be performed is defined as executing the JavaScript-method “search”.

That method is explained in the following.

The Solution

The solution is based on a rather simple idea. Just get all elements on the page that have a certain class-name (CSS-class). In this case when searching for the english text that class-name is “col-md-2”. Of course it might make sense to add a kind of empty class here that is only used for the sole purpose of searching for it. This way we are getting an array of elements which can then be looped and traversed to find sub-elements like the “p”-element that is containing the actual text.

Some simple string-method can be used to perform the actual search for the search-string. Once that string is found we are searching for the id-attribute of the parent div-element. Then we can jump onto that very position in the page.

The resulting JavaScript then looks like this which is hopefully pretty straightforward.

1<script>
2function search() {
3 
4   var name = document.getElementById("searchForm").elements["searchItem"].value;
5   var pattern = name.toLowerCase();
6   var targetId = "";
7 
8   var divs = document.getElementsByClassName("col-md-2");
9   for (var i = 0; i < divs.length; i++) {
10      var para = divs[i].getElementsByTagName("p");
11      var index = para[0].innerText.toLowerCase().indexOf(pattern);
12      if (index != -1) {
13         targetId = divs[i].parentNode.id;
14         document.getElementById(targetId).scrollIntoView();
15         break;
16      }
17   }  
18}
19</script>

One nice thing about this is that it could be easily enhanced to search in the other div-elements as well and by ordering this search one could weight what is more important. For example first finding text that defines a term and only then search the descriptions.

What should I say: Somehow I have started to like this. Of course I know that doing JavaScript without any additional framework is considered (very) old school and thus I probaly have to read this next 🙂 .