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

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

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

投稿

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

猜你喜欢

Python编程快速上手——疯狂填词程序实现方法分析

python笔记:mysql、redis操作方法

探讨php中防止SQL注入最好的方法是什么

Python selenium模拟网页点击爬虫交管12123违章数据

php关于array_multisort多维数组排序的使用说明

js Canvas实现的日历时钟案例分享

利用Python matplotlib绘制风能玫瑰图

sqlserver 导出插入脚本代码

Golang 按行读取文件的三种方法小结

Windows下mysql community server 8.0.16安装配置方法图文教程

TensorFlow 合并/连接数组的方法

SQL Server 的T-SQL高级查询详解

PyTorch训练LSTM时loss.backward()报错的解决方案

Python openpyxl 遍历所有sheet 查找特定字符串的方法

python 判断是否为正小数和正整数的实例

分析Python的Django框架的运行方式及处理流程

基于python2.7实现图形密码生成器的实例代码

Python调用工具包实现发送邮件服务

javascript实现json页面分页实例代码

MySQL 处理插入过程中的主键唯一键重复值的解决方法