帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS使用交流 → [原创]极简实现搜索到的动态内容页关键词高亮显示 【本版专题贴子】  
 1/2     1 2 ›› ›|
主题：[原创]极简实现搜索到的动态内容页关键词高亮显示 [加入收藏夹]   

ai1
用户头衔：举人

精华贴   ：0
发贴数   ：176
经验值   ：1629
注册时间：2012-01-31
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
[原创]极简实现搜索到的动态内容页关键词高亮显示
关键词高亮显示一般指搜索列表页上的关键词高亮显示，并不延申到内容页，这应该是个缺憾，对读者不甚友好。最近，尝试做个改善，实现内容页里的关键词高亮显示，当然这只能在动态页里做，比如手机版内容页，静态页是不可能的。具体方法：
1、在搜索列表页里把关键词通过链接参数传递到内容页，如&keyboard={$_GET['keyboard']}；
2、动态内容页直接加几行简单代码即可：
                        //关键词高亮显示开始                       
                        $search=explode(' ',urldecode($_GET['keyboard']));
                        $replacement=array_map(function($v) {
                                return "<font color=red>".$v."</font>"; //在关键词原始键值前后添加高亮样式
                        },array_values($search),$search);
                        $result=str_replace($search,$replacement,$r[newstext]); //数组批量替换
                        //关键词高亮显示结束               
                        ?>
                       <p><?=stripSlashes($result)?></p> //动态页正文，含高亮显示的关键词
增加关键词传参时也可一并捎带上搜索列表页对应页码，实现内容页可以准确返回列表页的功能。

[该贴被修改 4 次，最后修改时间 2025-10-20 11:27:18 ]

时间是把金钥匙
2025-10-20 11:23:31 已设置保密 顶部 回复 引用 报告 编辑 删除

jiuhecai
用户头衔：探花

精华贴   ：0
发贴数   ：3214
经验值   ：9269
注册时间：2014-07-02
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 2 楼]

感谢分享


帝国插件 插件定制。帝国临时工。查杀顽固木马。专业解决难题。qq--110102296
2025-10-21 07:14:55 已设置保密 顶部 回复 引用 报告 编辑 删除

明天你好
用户头衔：探花

精华贴   ：0
发贴数   ：2356
经验值   ：6708
注册时间：2012-11-19
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 3 楼]

谢谢分享



2025-10-21 07:51:09 已设置保密 顶部 回复 引用 报告 编辑 删除

zhxin
用户头衔：探花

精华贴   ：0
发贴数   ：4299
经验值   ：11892
注册时间：2013-01-09
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 4 楼]

支持下



2025-10-22 07:54:34 已设置保密 顶部 回复 引用 报告 编辑 删除

pingpong
用户头衔：探花

精华贴   ：0
发贴数   ：9519
经验值   ：24806
注册时间：2008-11-02
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 5 楼]

支持一下



2025-10-24 08:11:51 已设置保密 顶部 回复 引用 报告 编辑 删除

hibaidu
用户头衔：探花

精华贴   ：0
发贴数   ：4286
经验值   ：13088
注册时间：2010-05-26
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 6 楼]

支持一下



2025-10-27 07:55:40 已设置保密 顶部 回复 引用 报告 编辑 删除

feier
用户头衔：探花

精华贴   ：0
发贴数   ：6980
经验值   ：21746
注册时间：2008-07-31
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 7 楼]

支持下



2025-10-28 07:42:25 已设置保密 顶部 回复 引用 报告 编辑 删除

artery
用户头衔：举人

精华贴   ：0
发贴数   ：250
经验值   ：1198
注册时间：2006-01-08
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 8 楼]

不用这么麻烦的，只要一段JS就可以了，不过你要先在文章内容所在的DIV或是TD里加入：class="newstext-box"，然后在关键字出现的DIV或是TD里加入：class="keywords-box"
再在内容模板下方加入这一段就可以了：
<style>
.newstext-box a{color: #006ad3}
</style>
<script>document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll(".keywords-box a"),t=document.querySelector(".newstext-box");if(!e.length||!t)return;let r=t.innerHTML;const n=new Set;e.forEach(a=>{const c=a.textContent.trim(),l=a.getAttribute("href");if(n.has(c))return;const o=new RegExp(`(?<!["'>])(${c})(?![^<]*>|[^<>]*</a>)`);o.test(r)&&(r=r.replace(o,`<a href="${l}" class="highlight-keyword" target="_blank">$1</a>`),n.add(c))}),t.innerHTML=r});</script>

[该贴被修改 1 次，最后修改时间 2025-10-28 09:39:51 ]

_/_/_/_/ 我的签名就是这么不一样 ^_*
_/_/_/_/ 在下的小站：ARTERY.cn
2025-10-28 09:38:30 已设置保密 顶部 回复 引用 报告 编辑 删除

ai1
用户头衔：举人

精华贴   ：0
发贴数   ：176
经验值   ：1629
注册时间：2012-01-31
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 9 楼]

看不出楼上的那段js比原帖更简单易懂呀


时间是把金钥匙
2025-10-28 15:27:11 已设置保密 顶部 回复 引用 报告 编辑 删除

artery
用户头衔：举人

精华贴   ：0
发贴数   ：250
经验值   ：1198
注册时间：2006-01-08
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 10 楼]

我这个方法适合任合页面，不只是帝国，也不分什么动态或是静态页
原理就是：
只要“keywords-box”这个容器中有A标签包裹的文字，那么，就会把这个A标签的内容对应到“newstext-box”内同样的文字上，并赋予相同的URL
用在其它程序页面上同样有效，如果相同链接过多，你也可以把“keywords-box”隐藏，看需求，多变化
看演示：
http://ecms8.artery2000.com/xinwen/tuwen/2025-06-08/14.html

[该贴被修改 1 次，最后修改时间 2025-10-28 22:25:01 ]

_/_/_/_/ 我的签名就是这么不一样 ^_*
_/_/_/_/ 在下的小站：ARTERY.cn
2025-10-28 22:20:40 已设置保密 顶部 回复 引用 报告 编辑 删除
 1/2     1 2 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by： EBB Version 2.2.1