实现百度搜索关键字在网页中匹配字符高亮显示效果
/*说明：使用如下代码复制到网页文件，并在存放如下代码文件目录添加一个JQuery库即可*/
<!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 content="text/html; charset=UTF-8" http-equiv="content-type" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>关键搜索</title>
<style type="text/css">
.keyword
{
color: Red;
}
.content
{
width: 500px;
height: 200px;
border: 1px solid Black;
}
</style>
</head>
<body>
<div stye="width:80px;height:20px">
<label for="input">
关键字符:</label><input type="text" id="input" /><input type="button" id="btnSearch"
value="搜索" /></div>
<br />
<br />
<div id="content" class="content">
* 科技部否认中国部分军费隐藏在科技项目中 * [回应税负高:不能简单与国外比] [宗庆后:取消工薪阶层个税 拉动消费] * [上海市委书记:房价过高是不争事实]
[女记者提问环境问题时哽咽] * 卫生部司长:灰霾之下无法呼吸谈何幸福中国 * 四万亿决策内幕首曝光 财政部长称我兜里没钱了 * 证监会否认郭树清调任中投:媒体不会更早得知
* 张春贤：我也尝过切糕 一小块能买房之说不实 * 军委副主席范长龙：听党指挥是中国军队命根子 * 中国去年进口数千万吨转基因大豆用于榨油 * 住建部官员:出售5年以上唯一住房仍可免征个税
test ,demo key search t;
</div>
</body>
<script type="text/javascript">
(function() {//扩展javascript按类选择匹配DOM节点方法
window['Sy'] = {};
//获许指定标签下Class名
function getElementsByClassName(className, tag) {
var allTags = document.getElementsByTagName(tag);
var matchingElements = new Array();
className = className.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
var element;
for (var i = 0; i < allTags.length; i++) {
element = allTags[i];
if (regex.test(element.className)) {
matchingElements.push(element);
}
}
return matchingElements;
}
window['Sy']['getElementsByClassName'] = getElementsByClassName;
})();
String.prototype.trim = function() {//在String的原型对象上扩展trim方法
//1.去掉字符串中首尾空格*/
retval = this.replace(/(^\s*)|(\s*$)/g, "");
//2.字符串中间连续多少空格只保留一个空格
return retval.replace(/(\s){2,}/g, " ");
}
function highlightWord(node, word) {
// 判断是否有子节点
if (node.hasChildNodes) {
for (var index = 0; index < node.childNodes.length; index++) {
//递归调用highlightWord方法
highlightWord(node.childNodes[index], word);
}
}
//获文本信息
// var nitext = node.innerText;
var nitext =($(node).text()).replace(/\f\r\t\n/img, "").replace(/(\s){1,}/g, "");
var tempWordVal = word.toLowerCase();
// 处理当前节点
if (node.nodeType == 3) { //若是文本节点
var tempNodeVal = node.nodeValue.toLowerCase();
if (tempNodeVal.indexOf(tempWordVal) != -1) {
var pn = node.parentNode;
if (pn.className != "keyword" || pn.className == "none") {//若不存在样式searchword,则加上
var nv = node.nodeValue;
var ni = tempNodeVal.indexOf(tempWordVal);
//截取关键字以前部分的字符串，并创建文本节点
var before = document.createTextNode(nv.substr(0, ni));
//原始关键部分
var docWordVal = nv.substr(ni, word.length);
//截取关键字后剩下的字符串，并创建文本节点
var after = document.createTextNode(nv.substr(ni + word.length));
// 创建关键文本节点，并创建文本节点
var hiwordtext = document.createTextNode(docWordVal);
//创建span节点
var hiword = document.createElement("span");
//设置样式
hiword.className = "keyword";
//追加关键字节点
hiword.appendChild(hiwordtext);
pn.insertBefore(before, node);
pn.insertBefore(hiword, node);
pn.insertBefore(after, node);
pn.removeChild(node);
}
}
} else if (node.className && (node.className === "none") && (nitext && nitext === tempWordVal)) {
node.className = "keyword";//解决包装后的关键字符节点样式问题
} else { //alert("");
}
}
function keySearchHighlight(keywords) {
for (var index = 0; index < keywords.length; index++) {
highlightWord(document.getElementsByTagName("body")[0], keywords[index]);
}
}
document.getElementById("btnSearch").onclick = function() {//注册搜索事件
var inputnode = document.getElementById("input");
var contentnode = document.getElementById("content");
var input = inputnode.value.trim(); //获取输入的关键字符
var keywords = keywords || []; //新建存储关键数组
if (input && content) {
input = input.split(' ');
for (var index = 0; index < input.length; index++) {
keywords.push(input[index]);
}
//清除之前设置的样式
var addedClsNodes = Sy.getElementsByClassName("keyword", "span");
for (var index in addedClsNodes) {
addedClsNodes[index].className = "none";//设置成为存在的属性
}
keySearchHighlight(keywords);
} else {
alert("关键字符未输入");
}
}
</script>
</html>
浙公网安备 33010602011771号