一：对文章关键字的搜索（数组的方法）：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#search{
height:40pxwidth: 200pxfont-size: 30pxtext-align: center
}
#div {
font-size: 20pxwidth: 600px
}
#div span{
color: red
}
</style>
</head>
<body >
<input type="text" name="search" id="search" value="馋" onclick="this.value='' "/>
<input type="button" name="" id="bbtn" value="搜索" />
<div id="div">
<p>馋，在英文里找不到一个十分适当的字。罗马暴君尼禄，以至于英国的亨利八世，在大宴群臣的时候，常见其撕下一根根又粗又壮的鸡腿，举起来大嚼，旁若无人，好一副饕餮相！但那不是馋。埃及废王法鲁克，据说每天早餐一口气吃二十个荷包蛋，也不是馋，只是放肆，只是没有吃相。对有某一种食物有所偏好，于是大量的吃，这是贪多无厌。馋，则着重在食物的质，最需要满足的是品味。上天生人，在他嘴里安放一条舌，舌上还有无数的味蕾，教人焉得不馋？馋，基于生理的要求；也可以发展成为近于艺术的趣味。
也许我们中国人特别馋一些。馋字从食，有声。毚音谗，本义是狡兔，善于奔走，人为了口腹之欲，不惜多方奔走以膏馋吻，所谓“为了一张嘴，跑断两条腿”。</p>
</div>
<script type="text/javascript">
var bbtn=document.getElementById('bbtn')
var search=document.getElementById('search')
var text=document.getElementsByTagName('p')[0]
var text1=text.innerHTML
var arr=[]
var str=text1
bbtn.onclick=function(){
str=text1
arr=search.value
str=str.split(arr).join('<span>'+arr+'</span>')
text.innerHTML=str
}
</script>
</body>
</html>
二：对li表单的搜索：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0margin: 0
}
#content{
margin: 100px 300pxdisplay: block
}
input{
height: 50pxwidth: 400pxfont-size: 30pxline-height: 50px
}
ul{
}
li{
margin:10px 0pxdisplay: block
}
</style>
</head>
<body>
<div id="content">
<ul>
<input type="" name="" id="" value="" placeholder="请输入城市的名称或拼音"/>
<li pname="北京" cname="bj">北京</li>
<li pname="株洲" cname="zz">株洲</li>
<li pname="上海" cname="sh">上海</li>
<li pname="长沙" cname="cs">长沙</li>
<li pname="杭州" cname="hz">杭州</li>
<li pname="天津" cname="tj">天津</li>
<li pname="西安" cname="xa">西安</li>
<li pname="成都" cname="cd">成都</li>
<li pname="武汉" cname="wh">武汉</li>
<li pname="南京" cname="nj">南京</li>
</ul>
</div>
<script type="text/javascript">
var li=document.getElementsByTagName('li')
var text=document.getElementsByTagName('input')[0]
function search(){
var arr=text.value
for(var i=0i<li.lengthi++)
{
li[i].style.display="none"
if(li[i].getAttribute('pname').indexOf(arr)!=-1||li[i].getAttribute('cname').indexOf(arr)!=-1)
{
li[i].style.display="block"
}
}
}
text.oninput=function(){
search()
}
</script>
</body>
</html>
<table id="test"><tr>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="aaabbbaaabbbaaa"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
<tr>
<td><input value="aaacccbbbbcccc"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
</table>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样
菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>
<input type="text" value="输入要查询的内容" id="txtFind">
<input type="button" value="表查找" onclick="searchclick()">
<input type="button" value="简单查找" onclick="findText(txtFind.value)">
<script language="javascript">
var searchobj = new Object
var rng = new Object
searchobj.row = -1
searchobj.col = -1
function searchclick(){
findText2("test",txtFind.value)
}
function findText2(tabname,str){
var tab = document.getElementById(tabname)
var rowobj = tab.rows
//行数
var rownum = rowobj.length
if(searchobj.row != -1 &&searchobj.col != -1 ){
var trobj = tab.rows[searchobj.row]
//列数
var tdnum = trobj.cells.length
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0
if(document.selection)
num = document.selection.createRange().text.length
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num)
rng.moveEnd("character",rowobj[searchobj.row].cells[searchobj.col].childNodes[0].value.length)
//搜索到后选择文本
if(rng.findText(str))
rng.select()
if(rng.text==str){
return
}
//如果上次查询结果是最后一列
if(searchobj.col <tdnum-1){
for(var ii=searchobj.col+1ii<tdnumii++){
rng = rowobj[searchobj.row].cells[ii].childNodes[0].createTextRange()
//搜索到后选择文本
if(rng.findText(str))
rng.select()
if(rng.text==str){
searchobj.col = ii
return
}
}
}
//如果上次查询结果不是最后一行
if(searchobj.row != rownum-1){
for(var i=searchobj.row+1i<rownumi++){
var trobj = tab.rows[i]
//列数
var tdnum = trobj.cells.length
for(var j=0j<tdnumj++){
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT"){
rng = rowobj[i].cells[j].childNodes[0].createTextRange()
//搜索到后选择文本
if(rng.findText(str))
rng.select()
if(rng.text==str){
searchobj.row = i
searchobj.col = j
return
}
}
if(i==rownum-1 &&j==tdnum-1){
searchobj.row = -1
searchobj.col = -1
findText2(tabname,str)
}
}
}
}
else{
searchobj.row = -1
searchobj.col = -1
findText2(tabname,str)
}
}
else
{
for(var i=0i<rownumi++){
var trobj = tab.rows[i]
//列数
var tdnum = trobj.cells.length
for(var j=0j<tdnumj++){
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT"){
rng = rowobj[i].cells[j].childNodes[0].createTextRange()
//搜索到后选择文本
if(rng.findText(str))
rng.select()
if(rng.text==str){
searchobj.row = i
searchobj.col = j
return
}
}
if(i==rownum-1 &&j==tdnum-1){
alert("没有您要查找的内容")
}
}
}
}
}
var rng = document.body.createTextRange()
function findText(str)
{
debugger
if(str=="")
return
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0
if(document.selection)
num = document.selection.createRange().text.length
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num)
rng.moveEnd("character",txtBox.value.length)
//搜索到后选择文本
if(rng.findText(str))
rng.select()
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)
{
alert("搜索完毕")
rng = txtBox.createTextRange()
}
rng = txtBox.createTextRange()
}
</script>
