关键词高亮显示一般指搜索列表页上的关键词高亮显示，并不延申到内容页，这应该是个缺憾，对读者不甚友好。最近，尝试做个改善，实现内容页里的关键词高亮显示。上一个帖子介绍了php方法，只适用于在动态页里做，比如手机版内容页。这里的js方法应用范围更广，适合于静态和动态的内容页，具体如下：
1、在搜索页主程序(后台-模板管理-全站搜索模板以及静态页/e/sch/index.html)里把关键词通过链接参数传递到内容页，如?keyboard=<?=preg_replace('/\s+/',' ',trim($_GET['keyboard']))?>
2、在内容页模板文章标题上方的适当的元素属性里添加id="schs"；
3、内容页模板最后直接加几行简单的js代码（引号须改为英文的！）并更新所有内容页和动态页即可：
<script type="text/javascript">
//关键词高亮显示
var params=new URLSearchParams(window.location.search); //获取传参
var search=decodeURI(params.get('keyboard')).split(" "); //关键词分割成数组(多个之间以空格分开)
var highlights=search.map(v=>"<font color=red>"+v+"</font>"); //关键词高亮样式
var replacements=Object.fromEntries(search.map((key,index)=>[key,highlights[index]])); //关键词与高亮关键词键值对
var reStr='('+search.join('|')+')'; //正则替换样式
var re=new RegExp(reStr,'g');
document.getElementById('schs').innerHTML=document.getElementById('schs').innerHTML.replace(re,item=>replacements[item]); //获取文章并替换
//分页地址添加关键词传参
var links=document.querySelectorAll("div.epages a");
links.forEach(function(link) {link.href=link.href+'?'+params;});
</script>
以上方法已经通过测试和实际应用，效果很好。各分页也可以正常高亮显示搜索关键词。
|
顶部 
加入收藏夹
2025-11-15 15:22:55 
已设置保密
回复
引用
报告
编辑
删除
