【php+js】用PHP或者JS怎么显示搜索到的关键字高亮,及其文章里包含关键字的一小段
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怎么显示搜索到的关键字高亮,及其文章里包含关键字的一小段的更多相关文章
- CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- 使用JS在页面进行数据处理时显示等待画面
使用js在页面进行数据处理期间显示等待画面: 在页面选择执行函数进行数据处理期间,显示等待画面. <script> function fun(the,row_id) { //测试函数 // ...
- Highchar.js插件提示框千分位显示为空格而不是逗号 --(2018 08/06-08/12周总结)
1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
随机推荐
- http://download.csdn.net/detail/yanzi1225627/6548337
[2013.9.8网络首发]导入Android4.2源码里的Gallery2和Camera模块至Eclipse全过程 上次导入的时候是新建的一个user library,然后把所需要的四个库文件放里面 ...
- Combination Sum leetcode java
题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C ...
- 七牛云存储 qiniu 域名 回收 文件上传 备份 下载 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- HDU 4548 美素数 素数题解
本题就是能够直接打表的,推断能否够打表也须要技巧的: 1 推断最大的数值为1000000.百万下面的数打表都是能够的 2 能够线性预处理好.使用素数筛子法是能够接近线性预处理的. 故此能够打表了. 须 ...
- JAVA动态编译(JavaCompiler)
一.简介 在java中javax报下提供了JavaCompiler类,此类可以允许开发人员编译java文件为class文件. 下面示例中是利用JavaCompiler编译文件,并利用URLClassL ...
- android 桌面小工具(Widget)开发教程
刚学做了哥Widget,感觉不错哦,先来秀下效果(用朋友手机截的图) 这个Widget会每隔5秒钟自动切换内容和图片,图片最好使用小图,大图会导致你手机桌面(UI)线程卡顿 教程开始: 1.首先创建一 ...
- LSTM 文本情感分析/序列分类 Keras
LSTM 文本情感分析/序列分类 Keras 请参考 http://spaces.ac.cn/archives/3414/ neg.xls是这样的 pos.xls是这样的neg=pd.read_e ...
- angularJs中$controller的使用
$controller的使用 参考:https://stackoverflow.com/questions/27866620/can-someone-provide-a-use-case-for-th ...
- 前端开发必备 40款优秀CSS代码编写工具推荐
摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...
- centos 新建swap区文件
一. 相当详细且流程完整,(推荐阅读) 在centos7上新建swap区 https://www.digitalocean.com/community/tutorials/how-to-add-swa ...