web关键词搜索高亮代码
2014-02-08 09:26
337 查看
<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 window.onload = function search() { var obj = document.getElementById("container"); var keyWord = "${str}"; MarkHighLight(obj, keyWord, "Yellow"); } </script>
相关文章推荐
- QT分割窗口QSplitter类 .
- Myeclipse 10设置文本字体大小
- 2013-05-14期-Spring定时加入索引内容
- Java保存简单偏好的类
- java实现webservice实例
- phpcms v9 部署站点实践及总结
- 2013-04-22期-搜索引擎核心代码2
- Java中获取前一天和后一天时间
- 2013-04-22期-搜索引擎核心代码1
- .NET 4.0 WCF WebConfig aspNetCompatibilityEnabled 属性
- Lua中实现观察者模式
- 黄聪:C#程序中判断是否处在DEBUG调试状态或者RELEASE发布状态
- 搭建spring MVC项目
- C# 把图片文件保存到程序集里(借鉴)
- PHP Socket编程起步
- php Socket基础
- PHP语言中使用JSON
- Rolling cURL: PHP并发最佳实践
- C与汇编混合编程,获得CPU家族信息
- 浅谈PHP代码设计结构