javascript实现typecho搜索结果关键词高亮显示

经验笔记
浏览 loading

在此借花献佛，将dtdxrk的《原生Js 两种方法实现页面关键字高亮显示》（http://www.cnblogs.com/dtdxrk/p/3507875.html）进行简单整合将其应用于typecho搜索结果页关键词高亮。

指定高亮范围，div上加id：searchpage，如<div id="searchpage">

将以下代码放在页尾</body>前,也可以只放在archive.php模板文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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(' &raquo; ', '', ''); ?>');
// var key2 = keyLight('searchpage','微信','#fff','#f00'); 
// 高亮区域ID, 关键字,  背景透明
//支持多关键词、默认字体颜色：红
</script>
<?php endif; ?>

演示：
当前页面“以”字将高亮显示

.

Relay Tips: 一极乐（ https://yijile.com/log/532/ ）