javascript实现typecho搜索结果关键词高亮显示
将dtdxrk的《原生Js 两种方法实现页面关键字高亮显示》(http://www.cnblogs.com/dtdxrk/p/3507875.html)进行简单整合将其应用于typecho搜索结果页关键词高亮。
指定高亮范围,div上加id:searchpage,如<div id="searchpage">
将以下代码放在页尾</body>
前,也可以只放在archive.php模板文件中
<?php if($this->is('search')): ?>
<script>
function keyLight(id, key, fontColor, bgColor){
var oDiv = document.getElementById(id),
oChilds = oDiv.childNodes,
fontColor = fontColor || "red",
bgColor = bgColor || "transparent",
sKey = "<strong style='color: "+fontColor+"; background-color: "+bgColor+"; font-weight: normal;'>"+key+"</strong>",
rStr = new RegExp(key, "g");
for(var i =0; i<oChilds.length-1; i++){
if(oChilds[i].nodeType == 3 && //s/.test(oChilds[i].nodeValue)){ //删除空白的节点
oChilds[i].parentNode.removeChild(oChilds[i]);
}
oChilds[i].innerHTML = oChilds[i].innerHTML.replace(rStr,sKey); //替换key
}
}
var key1 = keyLight('searchpage','<?php $this->archiveTitle(' » ', '', ''); ?>');
// var key2 = keyLight('searchpage','微信','#fff','#f00');
// 高亮区域ID, 关键字, 背景透明
//支持多关键词、默认字体颜色:红
</script>
<?php endif; ?>