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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
cnpm加速Angular项目创建的方法
Sep 07 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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下实现农历日历的代码
2007/03/07 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python添加菜单图文讲解
2019/06/04 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
python如何操作mysql
2020/08/17 Python
struct与class的区别
2014/02/03 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
教师民族团结演讲稿
2014/08/27 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
宇宙与人观后感
2015/06/05 职场文书