javascript代码编写在页面中实现页内搜索功能,类似Word等文本编辑软件里的搜索功能,只要是页面中的字符(别管是显在的还是隐蔽在文本框内部的),用这个都能找出来。
从此,你的网页中又多了一个强大的不同寻常的工具。
<html> <head> <title>js查找页面中的字符</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF"> <table bgcolor="#000000" cellspacing="1" width="500" align="center"> <tbody> <tr> <td bgcolor="#4775c3" align="center"><strong style="font-weight: 400"> <font color="#FFFFFF" face="宋体" style="font-size: 9pt">查找页面中的字符</font></strong></td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" width="500" align="center"> <tr> <td align="left" valign="top" width="340"></td> <td align="left" valign="top" width="109"> <p align="center"></p> </td> <td align="left" valign="top" width="304"><font face="宋体" size="4" color="#FF0000"> </font></td> </tr> <tr> <td align="left" width="340" valign="top"><font face="宋体" color="#FF0000"> <span style="font-size: 9pt">在页面中实现搜索功能,类似Word等文本编辑软件里的搜索功能,只要是页面中的字符(别管是显在的还是隐蔽在文本框内部的),用这个都能找出来,从此,你的网页中又多了一个强大的不同寻常的工具。</span></font></td> <td align="left" width="109" valign="top"><font face="宋体" color="#FF0000"> </font></td> <td align="left" valign="top" width="304"> <span style="font-size: 9pt">你可以输入“脚本”一词查查看(共有三处)<br> <script language="JavaScript"> var NS4 = (document.layers); // Which browser? var IE4 = (document.all); var win = window; // window to search. var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; // Find next occurance of the given string on the page, wrap around to the // start of the page if necessary. if (NS4) { // Look for match starting at the current point. If not found, rewind // back to the first match. if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; // If not found in either direction, give message. if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); // Find the nth match from the top of the page. for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view. if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++; } // Otherwise, start over at the top of the page and find first match. else { if (n > 0) { n = 0; findInPage(str); } // Not found anywhere, give message. else alert("Not found."); } } return false; } </script> </span> <form name="search" onSubmit="return findInPage(this.string.value);"> <p align="center"> <font size="3"><input name="string" type="text" size="15" onChange="n = 0;"></font> <input type="submit" value="Find"> </p> </form> </td> </tr> </table> <div align="center"> <table width="500"> <tbody> <td width="492"> <div align="center"> <center> <table width="100%"> <tr> <td bgcolor="#3366CC" style="BORDER-BOTTOM: #817af3 1px solid; BORDER-LEFT-COLOR: #817af3; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #817af3; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #817af3; BORDER-TOP-WIDTH: 1px" align="center"><font color="#FFFFFF" style="font-size: 9pt">使用说明</font></td> </tr> <tr bgcolor="#ffffff"> <td bgcolor="#FFFFFF" style="BORDER-BOTTOM: #817af3 1px solid; BORDER-LEFT-COLOR: #817af3; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #817af3; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #817af3; BORDER-TOP-WIDTH: 1px" align="center"><br> <span style="font-size: 9pt">制作步骤:请将下面的代码插入到<body>部分: <br> </span> <form name="step"> <p></a><br> <textarea name="stepone" rows="12" cols="60">你可以输入“脚本”一词查查看</textarea> <form name="search" onSubmit="return findInPage(this.string.value);"> <font size=3><input name="string" type="text" size=15 onChange="n = 0;"></font> <input type="submit" value="Find"> </form> 哈哈,这里还有一个“脚本”
[提示:你可先修改部分代码,再按运行]