工学1号馆

home

thinkphp实现搜索关键字前端高亮显示

Wu Yudong    October 05, 2022     ThinkPHP   417   

最近的项目中需要对搜索关键字实现高亮显示,这个难度不大,记录一下,给需要的同学参考一下:

比如我已经从数据库中得到数据,例如文章的标题$value[‘title’],对其中包含的搜索关键字($query)实行高亮:

$value['title'] = preg_replace("/($query)/i", 
                "<em class=\"keyword\">{$query}</em>", $value['title']);

设置css:

    .text-highlight .keyword {
        background-color: #fff;
        color: #f03535;
    }

最后在前端加上raw函数解析html:

<span class="text-highlight">
    {$vo.title|raw}
</span>

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)