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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JS定义类的六种方式详解
May 12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
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 str_replace的替换漏洞
2008/03/15 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
css3中transition属性详解
2014/09/02 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
经理秘书岗位职责
2013/11/14 职场文书
学校后勤人员职责
2013/12/27 职场文书
风险评估实施方案
2014/03/09 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
婚庆答谢词
2015/01/04 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL