位置：首页>> 网络编程>> JavaScript>> js查找/搜索页面中的字符源代码

js查找/搜索页面中的字符源代码

作者：mailangel123　来源：111cn.cn　发布时间：2008-02-17 17:13:00　

标签：查找,字符,搜索,js

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>哈哈，这里还有一个“脚本”

[提示：你可先修改部分代码，再按运行]

投稿

js查找/搜索页面中的字符源代码

猜你喜欢