javascript - 如何添加带有下一个、上一个和关闭按钮的搜索栏来搜索 html 主页面中的文本

标签 javascript android jquery html

我有 mainpage.html 页面,其中包含大量单词。我想在顶部添加一个带有文本输入框的搜索栏,然后搜索“下一个”、“上一个”按钮(如图所示)和隐藏按钮来隐藏搜索栏,如果用户在输入框中放置任何文本,则会突出显示该文本,并且如果有多个具有相同名称的文本字符串,则从“下一个”和“上一个”按钮将导航用户到下一个或上一个文本,类似于桌面浏览器中的 ctrl+F(在屏幕截图下方) Chrome 浏览器上的搜索栏)

我寻找解决方案但没有找到,而且我不知道如何开始。

PS:我正在开发一个带有大量此类页面的 Android 离线应用程序,它很复杂,没有人找到任何解决方案来在 WebView 中实现此类搜索栏。所以我想如果可能的话,我会在 html 中嵌入搜索栏。

enter image description here

我的html页面是

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

最佳答案

我知道大多数 SO 老兵不喜欢这样的问题 - 但我喜欢(话又说回来,我不是老兵)。

我编写了几个函数供您尝试:

searchTermInPage - 在 HTML 中搜索术语,突出显示所有出现的情况,返回包含该术语的 textNode 列表

scrollToTextNode - 非常简单 - 将文本节点滚动到 View 中。

使用这些函数为自己构建界面(它们可能需要一些调整,但它可以解决“我不知道如何开始。”)

        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);
        }

关于javascript - 如何添加带有下一个、上一个和关闭按钮的搜索栏来搜索 html 主页面中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46755535/

相关文章:

javascript - jQuery 输入值故障排除

javascript - 2 Canvas 使用 drawImage 将一个 Canvas 置于另一个 Canvas 的中心

javascript - 无法以 Angular 获取在 ngOnInit() 中动态生成的数组的长度

javascript - Cordova Phonegap Barcode 插件无法从我的 Intel XDK 应用程序启动

c# - android 改造使用 asp.net web api [FromBody] 始终为 null

javascript - jQuery cookie : How can I save the color selection of the user for the next visit?

javascript - 图像的有限滚动

Android:设备屏幕不会与最新的 android 系统 WEBVIEW 超时

java - 应用程序在模拟器上运行良好,但在手机上经常崩溃

jquery - 使用 GitHub API V3 从组织获取私有(private) repo