在一些博客或者论坛中,文章中的敏感词需要显示出来和高亮显示起到提示用户的作用。这个功能实现的方法有很多,下面是js的实现方式。

 //将文章中匹配到的敏感词罗列出来
<span style="color:#CC6600">敏感词:</span><font color='red' id="show_word"></font> //文章显示区域
<div style="overflow-x:hidden;scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;background: #EAF3FA;" id="dispose_content"></div>
//1.在视图模板(本示例中使用的是laravel中的blade模板)中使用js接受文章正文内容,先暂存起来
var contents = "{!! $data['article_content'] !!}"; //文章内容先存在变量contents中 //2.再使用ajax去获取敏感词,并使用正则在文章循环匹配每一个敏感词
$.ajax({
url: "{{\Config::get('app.blog_cms')}}article/sensitiveword", //请求该方法获得铭感词
type: 'get',
dataType: 'json',
}).done(function(data) {
if(data.code == 200){
var str = '';
$.each(data.data, function(i, e) {
if(contents.indexOf(e.word) > 0){
str += e.word+', ';
//若匹配到了铭感词使用高亮显示,这里使用的是红色显示
contents = contents.replace(new RegExp(e.word,"gm"), '<span style="color:red;">'+e.word+'</span>');
}
});
$('#show_word').html(str); //将匹配到的敏感词放到敏感词显示区域
$('#dispose_content').html(contents); //将敏感词高亮后的文章放到文章显示区域
}
}).fail(function() {
console.log("error");
});

最新文章

  1. Network网络
  2. [翻译][erlang]cowboy handler模块的使用
  3. Chrome中的Device模块调式响应性设计
  4. window下安装oracle数据库
  5. MongoDB(2):入门
  6. PDO(PHP Data Object),Mysqli,以及对sql注入等问题的解决
  7. IT工作中工资最高和增长最快的是什么
  8. 使用ORACLE SQL Tuning advisor快速优化低效的SQL语句
  9. [翻译]HTML5 - 会话历史和导航
  10. Python-Blog1-搭建开发环境
  11. 理解javascript模块化(转)
  12. 机器学习中应用到的各种距离介绍(附上Matlab代码)
  13. jvm(二):内存管理
  14. Servlet之文件上传
  15. Node.JS + Mysql数据库
  16. log4j.properties与db.properties
  17. python读取文件首行和最后一行
  18. cool--music
  19. hi模板文件报乱码问题
  20. 安装virtualbox

热门文章

  1. Coding the Matrix作业Python Lab及提交方法
  2. nginx+apache+mysql+php+memcache+squid搭建集群web环境
  3. 工作流--JBPM简介及开发环境搭建
  4. 结构-行为-样式-angularJs笔记
  5. Testlink1.9.14介绍及使用
  6. 如何在标题栏的title前添加网站logo
  7. codewars-random(3)
  8. [HMLY]7.iOS MVVM+RAC 从框架到实战
  9. typings 命令使用注意
  10. Linux进程通信——管道