下面是网上的代码,可以将页面中的关键词高亮显示,但我要搜索的内容是两位数的数字的组合
比如：01 02 03 04 05 这样的数字组合就搜索不出来 只能搜索1位数字比如：1 2 3 4 5
请帮忙实现可以搜索两位数字的关键词高亮显示出来，同时最后可以自定义搜索结果的颜色，类似360浏览器2.0版本 搜索关键词高亮的效果。<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS 关键词高亮</title>
<script type="text/javascript">
/*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 .
* bgColor: 背景颜色，默认为红色.
*/
function MarkHighLight(obj, hlWords, bgColor) {
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0)
return;
if (bgColor == null || bgColor == "") {
bgColor = "red";
}
MarkHighLightCore(obj, hlWords);
//执行高亮标记的核心方法
function MarkHighLightCore(obj, keyWords) {
var re = new RegExp(keyWords, "i");
var style = ' style="background-color:' + bgColor + ';" '
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3) {
if (childObj.data.search(re) == -1) continue;
var reResult = new RegExp("(" + keyWords + ")", "gi");
var objResult = document.createElement("span");
objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
if (childObj.data == objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult, childObj);
} else if (childObj.nodeType == 1) {
MarkHighLightCore(childObj, keyWords);
}
}
}
//分析关键词
function AnalyzeHighLightWords(hlWords) {
if (hlWords == null) return "";
hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");
if (wordsArr.length > 1) {
var resultArr = BubbleSort(wordsArr);
var result = "";
for (var i = 0; i < resultArr.length; i++) {
result = result + "|" + resultArr[i];
}
return result.replace(/(^\|*)|(\|*$)/g, "");
} else {
return hlWords;
}
}
//利用冒泡排序法把长的关键词放前面
function BubbleSort(arr) {
var temp, exchange;
for (var i = 0; i < arr.length; i++) {
exchange = false;
for (var j = arr.length - 2; j >= i; j--) {
if ((arr[j + 1].length) > (arr[j]).length) {
temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
exchange = true;
}
}
if (!exchange) break;
}
return arr;
}
}
//end
function search() {
var obj = document.getElementById("waiDiv");
var keyWord = document.getElementById("keyWord");
MarkHighLight(obj, keyWord.value, "Orange");
}
</script>
</head>
<body>
<div id="waiDiv">
<input type="text" id="keyWord" />
<input type="button" value="搜索" onclick="search()" /><br />
<br />
<div id="contentDiv">
01 02 03 04 05 01 02 03 04 05 01 02 03 04 05 01 02 03 04 05
</div>
</div>
</body>
</html> 关键词高亮
比如：01 02 03 04 05 这样的数字组合就搜索不出来 只能搜索1位数字比如：1 2 3 4 5
请帮忙实现可以搜索两位数字的关键词高亮显示出来，同时最后可以自定义搜索结果的颜色，类似360浏览器2.0版本 搜索关键词高亮的效果。<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS 关键词高亮</title>
<script type="text/javascript">
/*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 .
* bgColor: 背景颜色，默认为红色.
*/
function MarkHighLight(obj, hlWords, bgColor) {
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0)
return;
if (bgColor == null || bgColor == "") {
bgColor = "red";
}
MarkHighLightCore(obj, hlWords);
//执行高亮标记的核心方法
function MarkHighLightCore(obj, keyWords) {
var re = new RegExp(keyWords, "i");
var style = ' style="background-color:' + bgColor + ';" '
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3) {
if (childObj.data.search(re) == -1) continue;
var reResult = new RegExp("(" + keyWords + ")", "gi");
var objResult = document.createElement("span");
objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
if (childObj.data == objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult, childObj);
} else if (childObj.nodeType == 1) {
MarkHighLightCore(childObj, keyWords);
}
}
}
//分析关键词
function AnalyzeHighLightWords(hlWords) {
if (hlWords == null) return "";
hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");
if (wordsArr.length > 1) {
var resultArr = BubbleSort(wordsArr);
var result = "";
for (var i = 0; i < resultArr.length; i++) {
result = result + "|" + resultArr[i];
}
return result.replace(/(^\|*)|(\|*$)/g, "");
} else {
return hlWords;
}
}
//利用冒泡排序法把长的关键词放前面
function BubbleSort(arr) {
var temp, exchange;
for (var i = 0; i < arr.length; i++) {
exchange = false;
for (var j = arr.length - 2; j >= i; j--) {
if ((arr[j + 1].length) > (arr[j]).length) {
temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
exchange = true;
}
}
if (!exchange) break;
}
return arr;
}
}
//end
function search() {
var obj = document.getElementById("waiDiv");
var keyWord = document.getElementById("keyWord");
MarkHighLight(obj, keyWord.value, "Orange");
}
</script>
</head>
<body>
<div id="waiDiv">
<input type="text" id="keyWord" />
<input type="button" value="搜索" onclick="search()" /><br />
<br />
<div id="contentDiv">
01 02 03 04 05 01 02 03 04 05 01 02 03 04 05 01 02 03 04 05
</div>
</div>
</body>
</html> 关键词高亮
解决方案 »
- 求一段JavaScript，自动调整区域的高度
- ctrl+Enter 提交不灵敏怎么办？
- 怎么取消radio的选中状态？
- IE7.0上无法正常显示
- 这个正则表达式是什么意思? /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/g
- 一个疑难问题,js如何改变某不确定id的内容
- 求救：java操作读卡器
- text中的值被JAVASCRIPT修改后不触发ONCHANGE事件，应该怎么捕捉到这个事件呢？
- MSDN里一段看不懂的程序，兄弟们帮忙啊~
- 比较急的问题：关于窗口关闭问题！
- 求高手，怎么批量绑定鼠标右键单击事件啊。我这代码有bug指点一下好吗。求求你们了，我研究一天未果了。
- js函数传入多级菜单项 大家参谋下
下面是带表格的数据：<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS 关键词高亮</title>
<script type="text/javascript">
/*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 .
* bgColor: 背景颜色，默认为红色.
*/
function MarkHighLight(obj, hlWords, bgColor) {
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0)
return;
if (bgColor == null || bgColor == "") {
bgColor = "red";
}
MarkHighLightCore(obj, hlWords);
//执行高亮标记的核心方法
function MarkHighLightCore(obj, keyWords) {
var re = new RegExp(keyWords, "i");
var style = ' style="background-color:' + bgColor + ';" '
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3) {
if (childObj.data.search(re) == -1) continue;
var reResult = new RegExp("(" + keyWords + ")", "gi");
var objResult = document.createElement("span");
objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
if (childObj.data == objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult, childObj);
} else if (childObj.nodeType == 1) {
MarkHighLightCore(childObj, keyWords);
}
}
}
//分析关键词
function AnalyzeHighLightWords(hlWords) {
if (hlWords == null) return "";
hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");
if (wordsArr.length > 1) {
var resultArr = BubbleSort(wordsArr);
var result = "";
for (var i = 0; i < resultArr.length; i++) {
result = result + "|" + resultArr[i];
}
return result.replace(/(^\|*)|(\|*$)/g, "");
} else {
return hlWords;
}
}
//利用冒泡排序法把长的关键词放前面
function BubbleSort(arr) {
var temp, exchange;
for (var i = 0; i < arr.length; i++) {
exchange = false;
for (var j = arr.length - 2; j >= i; j--) {
if ((arr[j + 1].length) > (arr[j]).length) {
temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
exchange = true;
}
}
if (!exchange) break;
}
return arr;
}
}
//end
function search() {
var obj = document.getElementById("waiDiv");
var keyWord = document.getElementById("keyWord");
MarkHighLight(obj, keyWord.value, "Orange");
}
</script>
</head>
<body>
<div id="waiDiv">
<input type="text" id="keyWord" />
<input type="button" value="搜索" onclick="search()" /><br />
<br />
<div id="contentDiv">
<!--表格里的数据-->
<table x:str border=0 cellpadding=0 cellspacing=0 width=740 style='border-collapse:
collapse;table-layout:fixed;width:561pt'>
<col class=xl33 width=44 style='mso-width-source:userset;mso-width-alt:1408;
width:33pt'>
<col class=xl34 width=29 span=24 style='mso-width-source:userset;mso-width-alt:
928;width:22pt'>
<tr class=xl32 height=19 style='height:14.25pt'>
<td height=19 class=xl33 style='height:14.25pt;'>一</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="1">01</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="2">02</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="3">03</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="5">05</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="7">07</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num="9">09</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>10</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>11</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>12</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>14</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>15</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>16</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>17</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>20</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>21</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>22</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>23</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>24</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>25</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>26</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>28</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>30</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>32</td>
<td class=xl34 width=29 style='border-left:none;width:22pt' x:num>33</td>
</tr>
<tr height=19 style='height:14.25pt'>
<td height=19 class=xl33 style='height:14.25pt;border-top:none'>二</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="1">01</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="2">02</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="4">04</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="5">05</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="7">07</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="8">08</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="9">09</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>10</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>12</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>13</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>14</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>15</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>16</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>17</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>18</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>22</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>23</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>25</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>26</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>27</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>28</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>29</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>30</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>32</td>
</tr>
<tr height=19 style='height:14.25pt'>
<td height=19 class=xl33 style='height:14.25pt;border-top:none'>三</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="1">01</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="2">02</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="4">04</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="5">05</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="8">08</td>
<td class=xl34 style='border-top:none;border-left:none' x:num="9">09</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>10</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>11</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>12</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>13</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>14</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>15</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>16</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>18</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>21</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>22</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>23</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>24</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>25</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>26</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>27</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>28</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>29</td>
<td class=xl34 style='border-top:none;border-left:none' x:num>30</td>
</tr>
</table><!--表格里的数据--></div>
</div>
</body>
</html>
怎么解决？