How to add Search Bar with Next, Previous and close Button to search text in main html page

Question

I have mainpage.html page which consists of large number of words. I would like to add an search bar at top with text input box and, search Next, previous buttons (as shown in image) and hide button to hide the search bar, where if user put any text inside input box will highlight the text and if there are multiple text string with same name then from Next and Previous button will navigate user to next or previous Text similar to ctrl+F in Desktop Browser (Below the screenshot of search bar on Chrome browser)

I searched for the solution but found none, and I have clueless how to start.

PS: I am developing an offline app for android with tons of such page, and It is complicated and none found any solution to implement such searchbar in WebView. So I thought if it is possible, I would embedded search bar inside html instead.

My html page is

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content='width=device-width, initial-scale=1.0,text/html,charset=utf-8' >
</head>

<h1 style="text-align: left;"><span style="text-decoration: underline;"><strong><span style="color: #ff0000; text-decoration: underline;">Cell Biology and Genetics</span></strong></span></h1>
<p>&nbsp;</p>
<h2><span style="color: #000080;">Cell Biology / Organells</span></h2>
<p>&nbsp;</p>
<p>1) Amembranous cell organelle</p>
<p>&nbsp;</p>
<p><strong><em>@Rajkumar N Mahesh are Close and Mutual</em></strong></p>
<p>&nbsp;</p>
<p>Explanation:</p>
<p><strong>R</strong>- Ribosome Smallest cell Organelle</p>
<p><strong>N</strong> - Nucleolus</p>
<p><strong>M</strong> - Microtubule, Micro filaments</p>
<p><strong>C</strong> - Centriole</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; -Chromosome</p>
<p>&nbsp;</p>
<p>Note:-</p>
<p><strong><em>☞</em></strong> <strong>Organellele structure without membrane</strong></p>
<p><strong><em>&nbsp; @ Manob Chor Never Come To my Room</em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<ul>
<li>M: Microfilament</li>
<li>C: Chromosome</li>
<li>N: Nuclelous</li>
<li>C: Centriold</li>
<li>tM: Microtuble</li>
<li>R: Ribosome</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><u>2) Single Membrane</u></p>
<p><strong><em>&nbsp;@ Singal Gal Love Entimate Partner</em></strong></p>
<p>&nbsp;</p>
<p>Explanation:</p>
<p>--&gt; <strong>S</strong>phaerosomes</p>
<p>--&gt; <strong>G</strong>lyoxysomes</p>
<p>--&gt; <strong>G</strong>olgi body</p>
<p>--&gt; <strong>Ly</strong>sosomes - small cell orgomelle with</p>
<p>--&gt; <strong>E.</strong>R membrane</p>
<p>--&gt; <strong>P</strong>eroxizome</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>3) &nbsp;Organelle structure with double membrane</strong></p>
<p><strong><em>@ Double Prime Minister of Nepal</em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p>&nbsp;</p>
<p>Double membrane</p>
<p>P: Plastid</p>
<p>M: Mitochondria</p>
<p>N: Nucleus</p>
<p>&nbsp;</p>
<p>Note:-</p>
<p><strong><em>☞</em></strong><strong><em> &nbsp;</em></strong>Organelle bounded by Triple membrane</p>
<p><strong>&nbsp;&nbsp;&nbsp; T</strong>ransosome - <strong>T</strong>riple membrane <strong><em>( @ T for T)</em></strong></p>
<p>&nbsp;</p>
<p><strong>4) Models of cell membrane</strong></p>
<p>&nbsp;</p>
<p>i. Lipid model: proposed by overton</p>
<p><strong><em>@(Lipid &asymp;&nbsp;&nbsp; Fat ( </em></strong><strong><em>बोशो</em></strong><strong><em> )&nbsp; </em></strong><strong><em>धेरै</em></strong> <strong><em>भएपछि</em></strong> <strong><em>weight Over </em></strong><strong><em>भएर</em></strong> <strong><em>ton </em></strong><strong><em>मा</em></strong> <strong><em>mesaurable </em></strong><strong><em>हुन्छ</em></strong><strong><em>)</em></strong></p>
<p>&nbsp;</p>
<p>ii. San<strong>D</strong>which model proposed by <strong>D</strong>anielli and <strong>D</strong>avson</p>
<p><strong>@D=D=D common</strong></p>
<p>&nbsp;</p>
<p>iii. Fluid Mosaic mdel: Singer and Nicolson</p>
<p><strong><em>@(Fluid &asymp;&nbsp; Flute ( </em></strong><strong><em>बाशुरी</em></strong><strong><em> ) </em></strong><strong><em>जब</em></strong> <strong><em>flute </em></strong><strong><em>बज्छ</em></strong> <strong><em>तब</em></strong> <strong><em>Singer </em></strong><strong><em>ले</em></strong> <strong><em>गीत</em></strong> <strong><em>Nicalcha</em></strong> )</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>5) &nbsp;Protoplasm </strong></p>
<p>i. <strong>D</strong>ujardin <strong>D</strong>iscovered protoplasm and term sarco<strong>D</strong>e</p>
<p><strong>@D is common</strong></p>
<p>ii. <strong>P</strong>urkinje coined the term <strong>p</strong>rotoplasm</p>
<p><strong>@P for P</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>6) Resolving power and magnification</strong></p>
<p><strong><em>@MERO </em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p>i.e <strong>M</strong>agnification power depends upon the diameter of <strong>E</strong>ye lens and</p>
<p><strong>R</strong>esolving power depends upon the diameter of <strong>O</strong>bjective lens.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>7) Mnemonic Device </strong></p>
<p><strong><em>@"BRIM GERL" </em></strong></p>
<p><strong><em>@"No Class Monday oR Friday"</em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation</strong></p>
<p>Type of Ribosome and Protein Destination:</p>
<p>Bound Ribosome- Integral Membrane, Golgi, Endoplasmic Reticulum, and Lysosome.</p>
<p>Free Ribosome - Nucleus, Cytoplasm, and Mitochondria.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>8) Mnemonic Device </strong></p>
<p><strong><em>@ "Golgi Distributes A SPAM"</em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation</strong></p>
<p><u>Golgi complex: functions </u></p>
<p>Distributes proteins and lipids from ER:</p>
<p>Add mannose onto specific lysosome proteins</p>
<p>Sulfation of sugars and slected tyrosine</p>
<p>Proteoglycan assembly</p>
<p>Add O-oligosugars to serine and threnonine</p>
<p>Modify N-ologosugars on asparagine.</p>
<p>&nbsp;</p>
<p>...............................</p>
<p>&nbsp;</p>
<p><strong><u>9) Shape of Chloroplast</u></strong></p>
<p><strong>&nbsp;<em>@ CC OR DV Z-Star </em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation:- </strong></p>
<p>&nbsp;</p>
<p><strong>C</strong>hlamydomonas = <strong>C</strong>upshaped</p>
<p><strong>O</strong>edogonium - <strong>R</strong>eticulate</p>
<p><strong>D</strong>isoid - <strong>V</strong>aucheria</p>
<p><strong>Z</strong>ygnema - <strong>S</strong>tar Shaped</p>
<p><strong>U</strong>lothrix - <strong>U</strong> shaped or girdle shapeorHorse shue shape</p>
<p>&nbsp;</p>
<p>....................</p>
<h1>&nbsp;</h1>
<h1><span style="color: #000080;">Cell Cycle</span></h1>
<p>&nbsp;</p>
<p><strong>1) Mneumonic Device</strong></p>
<p><em><strong>@!&ldquo;Go</strong></em>&nbsp;<em><strong>Sally</strong></em>&nbsp;<em><strong>Go!</strong></em>&nbsp;<em><strong>Make</strong></em>&nbsp;<em><strong>Children!&rdquo;</strong></em></p>
<p><em><strong>@&rdquo;Mahatma Gandhi Sonia Gandhi</strong></em></p>
<p><em><strong>Explanation:-</strong></em></p>
<p>Cell Cycle Can be divided into 2 stages:</p>
<p><strong>INTERPHASE:</strong></p>
<ul>
<li>G1&nbsp;Growth phase 1.</li>
</ul>
<ul>
<li>S&nbsp;Synthetic phase.</li>
<li>G2&nbsp;Growth phase2.</li>
</ul>
<p><strong>DIVISIONAL PHASE:</strong></p>
<ul>
<li>M&nbsp;Mitosis/Meiosis.</li>
<li><em>C</em>&nbsp;Cytokinesis.</li>
<li>&nbsp;</li>
</ul>
<p><strong>2) Mitosis</strong></p>
<p><em><strong>@&ldquo;People</strong></em>&nbsp;<em><strong>Meet</strong></em>&nbsp;<em><strong>And</strong></em>&nbsp;<em><strong>Talk (PMAT)&rdquo;</strong></em></p>
<ul>
<li><strong>Prophase,</strong></li>
<li><strong>Metaphase,</strong></li>
<li><strong>Anaphase,</strong></li>
<li><strong>Telophase.</strong></li>
</ul>
<p>&nbsp;</p>
<p><strong>3)Meiosis</strong></p>
<p><em><strong>@&ldquo;PMAT X 2&rdquo;</strong></em></p>
<p>Explanation:-</p>
<p>&nbsp;</p>
<p>It occurs in 2 stages:</p>
<p><strong><u>i)Meiosis</u></strong>&nbsp;<strong><em><u>I</u></em></strong>&nbsp;<strong><em>&ndash; reductional division:</em></strong></p>
<p>Prophase I,&nbsp;Metaphase I,&nbsp;Anaphase I,&nbsp;Telophase I.</p>
<p>&nbsp;</p>
<p><strong><u>ii)Meiosis II</u></strong>&nbsp;<strong><em>&ndash; equational division:</em></strong></p>
<p>Prophase II,&nbsp;Metaphase II,&nbsp;Anaphase II,&nbsp;Telophase II.</p>
<p>&nbsp;</p>
<p>Note:-</p>
<p>&nbsp;</p>
<p><strong><u>Prophase I</u></strong><strong><em>:</em></strong>&nbsp;divided into 5 substages:</p>
<p><em><strong>@Little</strong></em>&nbsp;<em><strong>Zara!&nbsp;Please&nbsp;Dance&nbsp;Daily.</strong></em></p>
<ul>
<li><strong>Leptotene,</strong></li>
<li><strong>Zygotene,</strong></li>
<li><strong>Pachytene,</strong></li>
<li><strong>Diplotene,</strong></li>
</ul>
<p>&nbsp;</p>
<h2><span style="color: #000080;">Genetics</span></h2>
<p>&nbsp;</p>
<p><strong>1)&nbsp; Term given by Bateson</strong></p>
<p>&nbsp;</p>
<p><strong><em>@BAG </em></strong></p>
<p>Explanation</p>
<p><strong>B</strong>atteson term -<strong> A</strong>llelomorph / Allele</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - <strong>G</strong>enetics</p>
<p>&nbsp;</p>
<p><strong>B</strong>ateson term:&nbsp;&nbsp; <strong>A</strong>llelomorph or allele, <strong>G</strong>enetic</p>
<p>&nbsp;</p>
<p><em>( Homozygous and heterozygous are also termed because allele is </em></p>
<p><em>determinant for it.)</em></p>
<p>&nbsp;</p>
<p>2) Mnemonic Device</p>
<p><strong><em>&nbsp;(@Bateson is Genius MAn father)</em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p>Bateson father of <strong>M</strong>odern <strong>gen</strong>etics</p>
<p>Father of <strong>An</strong>imal <strong>gen</strong>etics</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>3)Mneumonic Device:</strong></p>
<p><strong><em>@Alphabetically r, s (m), t.</em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation:</strong></p>
<p>RNA processing</p>
<p>In Eukaryotes, there are 3 RNA Polymerases.</p>
<p>RNA Polymerase I --&gt;&nbsp;rRNA.</p>
<p>RNA Polymerase II --&gt;&nbsp;mRNA.</p>
<p>RNA Polymerase III --&gt;&nbsp;tRNA.</p>
<p>&nbsp;</p>
<p>Alphabetically&nbsp;r, s (m),&nbsp;t.</p>
<p>&nbsp;</p>
<p><strong>4) Prcoseing of RNA</strong></p>
<p><strong>Processing of RNA occurs in 3 steps:</strong></p>
<p><strong>1. SPLICING: REMOVAL OF INTRONS AND JOINING OF EXONS.</strong></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<strong>EXons</strong>&nbsp;<strong>EXpressed,</strong>&nbsp;<strong>INtrons</strong>&nbsp;<strong>IN</strong>&nbsp;<strong>the trash.</strong></p>
<p><strong>2. CAPPING: ADDITION OF</strong>&nbsp;<em>METHYGUANOSINE PHOSPHATE</em>&nbsp;<strong>CAPS AT</strong>&nbsp;<em>5&prime;</em>&nbsp;<strong>END.</strong></p>
<p><strong>&nbsp;3. TAILING:</strong>&nbsp;<em>POLY-ADENYLATION</em>&nbsp;<strong>OCCURS AT</strong>&nbsp;<em>3&prime;</em>&nbsp;<strong>END.</strong></p>
<p>&nbsp;</p>
<p>@<strong><em>Alphabetically and numerically</em></strong></p>
<p><strong><em>3 &amp; A&nbsp;comes first,</em></strong>&nbsp;<strong><em>so</em></strong>&nbsp;<strong><em>A at 3&prime;&nbsp;end.</em></strong></p>
<p><strong><em>5 &amp; G</em></strong>&nbsp;<strong><em>comes&nbsp;later so&nbsp;G at 5&prime;end.</em></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Note:-</strong></p>
<p><strong>Eukaryotes have&nbsp;</strong><em>Split genes.</em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>5) Mnemonic Device</p>
<p><strong><em>&nbsp;@ID Ma Anti </em></strong><strong><em>ले</em></strong> <strong><em>Anda </em></strong><strong><em>पकाउनुहुन्छ</em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p><strong>ID</strong>: <strong>I</strong>ncomplete <strong>D</strong>ominance</p>
<p>Ma: Mirabilis Jalapa (4'0 clock plant )</p>
<p>Anti: Antirrhimum majus</p>
<p>Anda: Andalusian fowl</p>
<p>&nbsp;</p>
<p>6) Codominance</p>
<p><strong><em>@CASCO </em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p>C: Codominance</p>
<p>A: ABO blood goup</p>
<p>S: Sickle cell trait</p>
<p>CO: Coat colour</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>7) &nbsp;Mutation</p>
<p>&nbsp;</p>
<p>i. X-rays causes mutation by Deletion</p>
<p><strong><em>(@X is sign of deletion)</em></strong></p>
<p>&nbsp;</p>
<p>ii. UV-rays cause mutation by forming dimer</p>
<p><strong><em>(@ UV has 2 letter so cause mutation by dimer )</em></strong></p>
<p>&nbsp;</p>
<p>iii) y-rays cause mutation by producing free radical C</p>
<p><strong><em>@ y is electromagnetic wave and neutral like ligh and light produce free radicle . </em></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>8) &nbsp;Mnemonic Device</p>
<p><strong><em>&nbsp;@Mo Tu </em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p>Monosomy condition ( 2n-1) gives Turner syndrome</p>
<p>&nbsp;</p>
<p><strong>9) Initiation codon:</strong></p>
<p>&nbsp;Initiation codon&nbsp;on mRNA.</p>
<p><em><strong>AUG</strong></em>&nbsp;<em><strong>--&gt; INAUGURATES PROTEIN SYNTHESIS.</strong></em></p>
<p>&nbsp;</p>
<p><strong>9) Termination codon name</strong></p>
<p>i. UAG: Amber</p>
<p>&nbsp;&nbsp; <strong><em>@ UAG &asymp; AAG&nbsp; Amber ( </em></strong><strong><em>आग</em></strong><strong><em>) </em></strong><strong><em>आगो</em></strong> <strong><em>भनेको</em></strong>&nbsp;&nbsp; <strong><em>Amber </em></strong><strong><em>संस्कृतमा</em></strong></p>
<p>&nbsp;</p>
<p>ii. UGA: Opal</p>
<p><strong><em>&nbsp;&nbsp;&nbsp; @UGA &asymp;&nbsp; GopAL: Opal</em></strong></p>
<p>iii. UAA: Ochre (Muj up )</p>
<p>&nbsp;</p>
<p><u>Note:-</u></p>
<p>&nbsp;</p>
<p><u>Termination codons</u>&nbsp;on mRNA:</p>
<p><em><strong>UAA</strong></em>&nbsp;<em><strong>--&gt;</strong></em>&nbsp;<em><strong>U</strong></em>&nbsp;<em><strong>ARE</strong></em>&nbsp;<em><strong>AWAY.</strong></em></p>
<p><em><strong>UAG</strong></em>&nbsp;<em><strong>--&gt;</strong></em>&nbsp;<em><strong>U ARE</strong></em>&nbsp;<em><strong>GONE.</strong></em></p>
<p><em><strong>UGA</strong></em>&nbsp;<em><strong>--&gt; &nbsp;U</strong></em>&nbsp;<em><strong>GO</strong></em>&nbsp;<em><strong>AWAY.</strong></em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong><u>10) PROTEIN</u></strong>&nbsp;<strong><u>SYNTHESIS</u></strong>&nbsp;</p>
<p>iT OCCURS WITH THE HELP OF RIBOSOMES. THEY&nbsp;</p>
<p>CONSIST OF 2 SUBUNITS :</p>
<p>&nbsp;</p>
<p><em><strong>IN</strong></em>&nbsp;<em><strong>EUKARYOTES: 40S + 60S --&gt; 80S (EVEN)</strong></em>.</p>
<p><em><strong>IN</strong></em>&nbsp;<em><strong>PROKARYOTES: 30S + 50S --&gt; 70S (ODD</strong></em>).</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>11) Ribosome</strong></p>
<p>A Ribosome has 3 sites:</p>
<p>&nbsp;</p>
<p><em>A</em>&nbsp;<em>SITE = INCOMING</em>&nbsp;<em>AMINOACYL-TRNA.</em></p>
<p><em>P</em>&nbsp;<em>SITE = GROWING</em>&nbsp;<em>PEPTIDE CHAIN</em><em>.</em></p>
<p><em>E</em>&nbsp;<em>SITE = HOLDS</em>&nbsp;<em>EMPTY TRNA AS ITS</em>&nbsp;<em>EXITS</em><em>.</em></p>
<p><strong>Messenger RNA acts as the&nbsp;<em>template for protein synthesis.</em></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>AMINO ACID ATTACHMENT ARM HAS A&nbsp;C C A SEQUENCE&nbsp;</p>
<p>BY THE HELP OF WHICH IT FORMS ESTER BOND WITH AMINO</p>
<p>ACID.</p>
<p><em><strong>C C A</strong></em>&nbsp;<em><strong>&ndash;</strong></em><strong>&nbsp;@</strong><em><strong>Can</strong></em>&nbsp;<em><strong>Carry</strong></em>&nbsp;<em><strong>Amino acid.</strong></em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>12) Mnemonic Device</strong></p>
<p><strong><em>@ Operaon concept is like MoJa</em></strong></p>
<p>&nbsp;</p>
<p>Explanation</p>
<p><strong>Operon concept</strong> given by <strong>Mo</strong>nad and <strong>Ja</strong>cob</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>13)Enzyme Classification</p>
<p><strong><em>&ldquo;Over The HILL&ldquo;</em></strong></p>
<p>&nbsp;</p>
<p>Explanation:</p>
<ul>
<li>Oxidoreductases</li>
<li>Transferases</li>
<li>Hydrolases</li>
<li>Isomerases</li>
<li>Ligases</li>
<li>Lyases</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>14) Mnemonic Device</p>
<p><strong><em>@"The Rhythm Nearly Proved Contagious"</em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation</strong></p>
<p>Vitamin 'B' names in increasing order:</p>
<ul>
<li>Thiamine (B1)</li>
<li>Riboflavin (B2)</li>
<li>Niacin (B3)</li>
<li>Pyridoxine (B6)</li>
<li>Cobalamin (B12)</li>
</ul>
<p>......................................................</p>
<p>&nbsp;</p>
<p><strong>15) Mnemonic Device</strong></p>
<p><strong><em>@"PHenylketonuria"</em></strong></p>
<p>&nbsp;</p>
<p><strong>Explanation</strong></p>
<p>Phenylketonuria: which enzyme is deficient</p>
<p>PHenylketonuria is caused by a deficiency of:</p>
<p>Phenylalanine Hydroxylase.</p>
</div>
</div>
</div>


<body>

</body>
</html>

This is possible using javascript to search a block of content for a specified string, which can be a variable taken from a user input. It seems like a lot of trouble to go through to duplicate a functionality that already exists in the browser though — Claire, Oct 15 '17 at 13:33
It can't be done with just html if that's what you're asking — Claire, Oct 15 '17 at 13:34
@Tom, can you provide me any solution, as I have mentioned earlier that to apply search Text Functionality in WebView of android solution, I couldn't found nowhere...so If it possible then It is better to include in page itself with beautiful design. That way I won't have spend so much time to solve this, as I already searched for milliions and studied millions of articles about implementing search bar in adnroid webview but no couldn't found a single one. — BlueYeti24, Oct 15 '17 at 13:36
@G-Cyr, I am designing it for android Webview , so It won't be possible to hit F3 key thought. But instead I can add menu bar with search option in it which is the solution I'm looking for. — BlueYeti24, Oct 15 '17 at 13:37
@Tom, I know as I have gone through lot of post and there is mention of jquery and javascript but I couldn't bind them all together and make it work for above html .......everything I have learned so far is from Tutorials and videos,...so it is hard for me to make sense of coding a little. So I'm looking for anyone to come up with any idea , if it is possible. — BlueYeti24, Oct 15 '17 at 13:39
okay, is that a duplicate of your trouble ? https://stackoverflow.com/questions/27378981/how-to-use-searchview-in-toolbar-android — G-Cyrillus, Oct 15 '17 at 13:53
@G-Cyr, I don't know it if works for webView or not, I'd give it a try and I'll inform . — BlueYeti24, Oct 15 '17 at 13:55

score 0 · Accepted Answer · answered Oct 15 '17 at 14:24

I know most SO veterans do not like questions like this - but I do (then again, I'm no veteran).

I wrote a couple of functions for you to try out:

searchTermInPage - searches a term inside the HTML, highlights all occurrences, returns list of textNodes containing the term

scrollToTextNode - very simple - scrolls the text node into view.

use these functions to build yourself the interface (they will probably need some tweaking, but it takes care of the " I have clueless how to start.")

        function searchTermInPage(term){
            var exisiting = document.querySelectorAll('.myJsSearch')
            for(var i = 0 ; i <exisiting.length ; i++){
                var textNode = document.createTextNode(exisiting[i].textContent);
                exisiting[i].parentNode.replaceChild(textNode,exisiting[i]);
            }
            if(term == '')
                return;
            var results = [],j = 0,all;
            searchTerm = new RegExp(term,'ig');
            all = document.body.querySelectorAll(':not(script)')
            all.forEach(function(_this){
                for (var i = 0; i < _this.childNodes.length; ++i){
                    if (_this.childNodes[i].nodeType === 3)
                        if(_this.childNodes[i].textContent.search(term) > -1){
                            var textToUse = _this.childNodes[i].textContent.replace(term,'<b class="myJsSearch" style="background:yellow">'+term+'</b>');
                            //_this.insertBefore(newNode,_this.childNodes[i])
                            _this.innerHTML = _this.innerHTML.replace(_this.childNodes[i].textContent,textToUse);
                            results[j] = _this.childNodes[i];
                            j++;
                        }
                }
            })
            return results
        }


        function scrollToTextNode(textNode){
            window.scrollTo(0,textNode.parentElement.getBoundingClientRect().top + textNode.parentElement.offsetTop);
        }

I almost lost the hope, that Maybe it can't be done, I should find my another way ...but thank for keeping my spirit high. Everything I learned so far is from examples and Tutorials, so I really starting to make sense of the world of coding....what you did is really great. I would love to try this..but still would be great if you could help me with implementing this on above html page I have introduced, would solve my problem and I will see how these works and will learn a lot by example. — BlueYeti24, Oct 15 '17 at 16:10

How to add Search Bar with Next, Previous and close Button to search text in main html page

1 Answers1

Linked