用脚本实现站内搜索关键词高亮

起初准备将搜索匹配到的词语在后台处理

通过给匹配词添加样式标签，比如preg_match('/pat/','<style>pat</style>',$ret);

想了想，发现用javascript来做更合适，因为这完全是view层的事情

下面是解决方案：

1. 下载se_hilite.zip  文件，解压，得到 se_hilite_src.js 文件

2. 在要高亮的页面引入se_hilite_src.js文件

3. 给高亮的文字定义css样式

4. 配置se_hilite_src.js文件，如果是中文网页：

exact:false

elementid:高亮区域的id

5.修改 se_hilite_src.js文件

将如下部分进行修改：

Hilite.search_engines = [
    ['google\\.', 'q'],                             // Google
    ['search\\.yahoo\\.', 'p'],                     // Yahoo
    ['search\\.msn\\.', 'q'],                       // MSN
    ['search\\.live\\.', 'query'],                  // MSN Live
    ['search\\.aol\\.', 'userQuery'],               // AOL
    ['ask\\.com', 'q'],                             // Ask.com
    ['altavista\\.', 'q'],                          // AltaVista
    ['feedster\\.', 'q'],                           // Feedster
    ['search\\.lycos\\.', 'q'],                     // Lycos
    ['alltheweb\\.', 'q'],                          // AllTheWeb
    ['technorati\\.com/search/([^\\?/]+)', 1],      // Technorati
    ['dogpile\\.com/info\\.dogpl/search/web/([^\\?/]+)', 1, true] // DogPile
];

因为这些你的网站都用不上，直接改为：

Hilite.search_engines = [
    ['your_domain', 'query'],                            
];

query: GET方式请求时的参数名，比如www.mysite.com/search.php?query="xxxx"

your_domain: 就是下面代码中se[0]的部分

regex.compile('^http://(www\\.)?' + se[0], 'i');

如果你是二级域名，需要修改上面的代码，比如直接改为：

regex.compile('^http://(.)?' + se[0], 'i');

上面的search_engines数组的your_domain直接给出二级域名，比如：news.mysite.com。

修改完成之后，可以将该js文件压缩再导入网页。

6.在页面顶部动态传递 js 字符串：

<?php $url =  "http://".$_SERVER ['HTTP_HOST'].$_SERVER['PHP_SELF'];?>

<script type="text/javascript">

 Hilite.debug_referrer = <?php echo $url?>;

</script>

 

---

 

最后的配置文件大概如下：

<?php $url = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] ?>
<script type="text/javascript" src="path_to/se_hilite.js"></script>
<script type="text/javascript">
//Hilite.debug_referrer = 'http://www.mysite.com/search?abc=def&query=aaa+bbb+ccc&foo=bar';
Hilite.debug_referrer = <?php echo $url ?>;
Hilite.exact = false;
Hilite.elementid = 要高亮区域的id;
</script>
<style type="text/css">
.hilite1 { background-color: #ff0; }  //对应aaa
.hilite2 { background-color: #f0f; }  //对应bbb
.hilite3 { background-color: #0ff; }  //对应ccc
.hilite4 ...
</script>

参考：http://scott.yang.id.au/code/se-hilite/