JavaScript 过滤关键字


Posted in Javascript onMarch 20, 2017

效果图:

JavaScript 过滤关键字

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 em { font-size: 16px; color: red; }
 </style>
</head>
<body>
 <p id="cont">JavaScript过滤关键字的方法JavaScript过滤关键字的方法</p>
 <script>
 //================================= 可用状态代码 =====================================
// var arr = ['Java','关键字', '方法'],
// arrText = arr.join('|'),
// var params = document.querySelector('#cont');
//
// // 替换关键字
// params.innerHTML = params.innerHTML.replace(new RegExp(arrText, "ig"), "<em>$&</em>");
// var arr = [];
// console.log(arr);

//================================= 修改后的代码 =====================================
 /**
 * 过滤关键字
 * @param keyArr 需要过滤的关键字数组
 * @param ele 过滤的节点
 */
 function filterContent(keyArr, ele) {
 /**
 * 一个程序的标准准则
 * 1. 可用, 可以实现核心的需求
 * 2. 健壮, 兼容性处理, 边界处理, 异常处理, 用户输入校验
 * 3. 可靠, 任何时候都要有返回值
 * 4. 宽容, 对需求宽容, 对调用着宽容, 对维护者宽容
 * 5. 精益求精, 可靠的注释...
 */
 try {
 // 检测是否为 undefined 或者为一个数组,或者数组长度是否大于 1, 这里的返回 -1 只是为了有返回值, 也可以不写
 if (keyArr === 'undefined' || !(keyArr instanceof Array) || keyArr.length < 1) return -1;
 // 将数组里面的元素以 | 进行合并方便进行正则比较, 如 张三|李四
 var arrTxt = keyArr.join('|'),
  regObj = new RegExp(arrTxt, 'ig');
 // 替换关键字
 ele.innerHTML = ele.innerHTML.replace(regObj, "<em>$&</em>");
 } catch (e) {
 console.log('出错啦~' + e);
 }

 }
 // 调用
 var arr = ['Java','关键字', '方法'];
 var params = document.querySelector('#cont');
 filterContent(arr, params);
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
You might like
PHP中feof()函数实例测试
2014/08/23 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python 多线程中join()的作用
2020/10/29 Python
python归并排序算法过程实例讲解
2020/11/04 Python
python中pow函数用法及功能说明
2020/12/04 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
请介绍一下Ant
2016/07/22 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
工程服务质量承诺书
2015/04/29 职场文书
停发工资证明范本
2015/06/12 职场文书
初中班主任心得体会
2016/01/07 职场文书