1、想要实现的效果:

2、思路:小数据量使用 php的正则替换,即【preg_replace()】函数 -->> 支持多个关键词高亮显示,中间参数1和参数2放入对应的数组即可。

$title = preg_replace($pattern, $replacement, $subject);

3、具体显示:

foreach($_list as $k=>$v){

    $_list[$k]['desc'] = preg_replace($pattern, $replacement, $v['desc']);

}

print_r($_list);

4、附一个tp5的使用案例

/**

* 用于高亮搜索关键词

* @param string $string 原文本

* @param string $needle 关键词

* @param string $class  span标签class名 : 以下c-red为H-ui框架的样式

* @return mixed

*/

function high_light($string, $needle = '', $class = 'c-red')

{

return $needle !== '' ? str_replace($needle, "<span class='{$class}'>" . $needle . "</span>", $string) : $string;

}

/***************TP5模板调用*********/

<td>{$vo.realname|high_light=$Request.param.realname}</td>

6、附js的思路:js其实和php都差不多,也是页面加载完毕,ready状态,进行数据循环体遍历,js的正则替换,高亮显示即可。

String.prototype.myReplace=function(f,e){//吧f替换成e
var reg=new RegExp(f,"g"); //创建正则RegExp对象
return this.replace(reg,e);
} //应用示例
var str='我是生长在中国南方的纯正中国人';
var newstr=str.myReplace('中国','天朝');
alert(newstr);

输出//

【php+js】用PHP或者JS怎么显示搜索到的关键字高亮,及其文章里包含关键字的一小段的更多相关文章

  1. CSS控制XML与通过js解析xml然后通过html显示xml中的数据

    使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  2. 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

  3. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  4. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  5. 使用JS在页面进行数据处理时显示等待画面

    使用js在页面进行数据处理期间显示等待画面: 在页面选择执行函数进行数据处理期间,显示等待画面. <script> function fun(the,row_id) { //测试函数 // ...

  6. Highchar.js插件提示框千分位显示为空格而不是逗号 --(2018 08/06-08/12周总结)

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  7. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

  8. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  9. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

随机推荐

  1. Linux修改终端显示前缀及环境变量

    Linux终端前面默认显示一长串,如: [work@aaa.baidu.com dir]$ 这是由PS1环境变量决定的: [work@aaa.baidu.com dir]$ echo $PS1 [\u ...

  2. 7.4 服务远程暴露 - 创建Exporter与启动netty服务端

    为了安全:服务启动的ip全部使用10.10.10.10 远程服务的暴露总体步骤: 将ref封装为invoker 将invoker转换为exporter 启动netty 注册服务到zookeeper 订 ...

  3. C++ 变量默认初始值不确定(代码测试)

    C++ int变量默认初始值是不确定的,因此使用时初始化是很有必要的. 下面写个小程序测试一下int变量默认初始值. #include <iostream> #include <ve ...

  4. LeetCode 114| Flatten Binary Tree to Linked List(二叉树转化成链表)

    题目 给定一个二叉树,原地将它展开为链表. 例如,给定二叉树 1 / \ 2 5 / \ \ 3 4 6 将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ 6 解析 通过递归实现:可以用先序遍历, ...

  5. Anciroid的IPC机制-Binder原理

    Binder驱动的原理和实现 通过上一节的介绍,大家应该对Binder有了基本的认识了.任何上层应用程序接口和用户操作都需要底层硬件设备驱动的支持,并为其提供各种操作接口.本节首先从Binder的驱动 ...

  6. Android -- Exif

    Exif Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了数码照片的信息,包括拍摄的光圈.快门.平衡白.ISO.焦距.日期时间等各种和拍摄 ...

  7. Java信号量Semaphore

    Semaphore Semaphore分为单值和多值两种,前者只能被一个线程获得,后者可以被若干个线程获得. Semaphore实现的功能就类似厕所有5个坑,假如有10个人要上厕所,那么同时只能有多少 ...

  8. 转: git使用时让http记住帐号密码

    见 http://git.mydoc.io/?t=154710 https 方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受 https 带来的极速 按照以下设置记住密 ...

  9. (转)Unity3D研究院之Assetbundle的实战(六十三)

    上一篇文章中我们相惜讨论了Assetbundle的原理,如果对原理还不太了解的朋友可以看这一篇文章:Unity3D研究院之Assetbundle的原理(六十一) 本篇文章我们将说说assetbundl ...

  10. 15款不容错过的前端开发Javascript和css类库 - 2017版本~

    前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...