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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
JavaScript实现京东放大镜效果
Dec 03 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
学习jquery之一
2007/04/27 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
python多线程操作实例
2014/11/21 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python中list初始化方法示例
2016/09/18 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
我的收音机情缘
2022/04/05 无线电
Oracle使用别名的好处
2022/04/19 Oracle