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(' &raquo; ', '', ''); ?>');
// var key2 = keyLight('searchpage','微信','#fff','#f00'); 
// 高亮区域ID, 关键字,  背景透明
//支持多关键词、默认字体颜色:红
</script>
<?php endif; ?>

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

.

转载请注明转自:一极乐https://yijile.com/log/532.html


话题相关文章

话题标签

TypechoTypecho模版代码JavaScript

一极乐 为乐趣而生

《 javascript实现typecho搜索结果关键词高亮显示》  发表时间:  最后更新时间:

谁来过

寒叶邀请你对本文不足说出你的看法!

有 13 条评论

  1. JoyfulPhysics JoyfulPhysics

    我试了下我的网站,不灵

  2. 寒叶 寒叶

    应该可以的,
    哈哈我不会php

  3. 欧家凯凯 欧家凯凯

    这个可以用php实现嘛

  4. 小易分享网 小易分享网

    不错学习了,谢谢分享!

  5. 寒叶 寒叶

    好资源源于共享,借花献佛

  6. 博客大全网 博客大全网

    不错 感谢分享

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP