JavaScript 过滤关键字
更新时间：2017年03月20日 14:09:04 作者：pigletzzz
本文主要介绍了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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了微信小程序 轮播图实现原理及优化详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本篇文章是对B/S模式项目中常用的javascript进行了汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
js图片上传预览2009-06-06
这篇文章主要为大家详细介绍了JavaScript canvas实现围绕旋转动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式2013-03-03
onload事件当一个页面或是一张图片加载完成时被触发，在body上不仅可以用onload，而且还支持多个HTML标签.用法如下2013-09-09
这篇文章主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
一个类似vbscript的round函数的javascript函数
同vbscript的Round函数功能相同，四舍五入保留指定小数位数2009-04-04
添加以下代码到你的博客中: (呵呵，抄袭至lulu Studio http://s8.hk/0itw)2010-12-12
最新评论