The resulting JavaScript then looks like this which is hopefully pretty straightforward. Then we can jump onto that very position in the page. Once that string is found we are searching for the id-attribute of the parent div-element. Some simple string-method can be used to perform the actual search for the search-string. 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. 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. In this case when searching for the english text that class-name is “col-md-2”. Just get all elements on the page that have a certain class-name (CSS-class). The solution is based on a rather simple idea. That method is explained in the following. On submitting the form the action to be performed is defined as executing the JavaScript-method “search”. Page name when your site or blog is saved as a bookmark or favorite Page name when it’s shared on social media Search results as the headline above the description of the page’s content The text in your description meta tag, approximately 50-300 characters, should: Summarize the content of the web page Entice the searcher to want to. It is a rather simple HTML-form that can be used to enter the search-string and to then submitting the form. Using Bootstrap for this it happended that the web page contains entries like the following (quite a lot of them): The webpage to be searched lists technical phrases in english language, gives a translation into german and adds a short explanation to each term. I am pretty sure it should be relatively easy to apply the solution to this on similar problems then. The problem to solve can be best shown by example.
(Edited : Please see comment in the comments section below on W3School.)
Thus I ended up reading the W3School’s JavaScript Tutorial. But somehow this time I did not really find a satisfying answer with Google and did not want to bother anyone with this. Well, my usual solution to any JavaScript-related question is: Google or my colleague Fabian. 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. 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.”
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.
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).