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 相关文章推荐
jquery和ajax的关系详细介绍
Nov 29 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
js实现录音上传功能
Nov 22 Javascript
vue实例的选项总结
Jun 09 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
PHP5 安装方法
2006/10/09 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Python生成随机密码
2015/03/10 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python实现线程池的方法
2015/06/30 Python
python计算圆周率pi的方法
2015/07/11 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
给排水专业应届生求职信
2013/10/12 职场文书
学校节能减排方案
2014/06/13 职场文书
标准毕业生自荐信
2014/06/24 职场文书
企业公益活动策划方案
2014/08/24 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
Python实现双向链表
2022/05/25 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python