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 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python中的变量和作用域详解
2016/07/13 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python 二维数组90度旋转的方法
2019/01/28 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
授权委托书范本
2014/04/03 职场文书
大型活动组织方案
2014/05/10 职场文书
大学生村官考核材料
2014/05/23 职场文书
材料化学专业求职信
2014/07/15 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android