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 根据文件夹目录获取Json数据输出demo

    详解Js 根据文件夹目录获取Json数据输出demo

    这篇文章主要为大家介绍了Js 根据文件夹目录获取Json数据输出示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 原生JS实现音乐播放器

    原生JS实现音乐播放器

    这篇文章主要为大家详细介绍了原生JS音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • javascript实现的简单的表单验证

    javascript实现的简单的表单验证

    这篇文章主要介绍了javascript实现的简单的表单验证的相关资料,需要的朋友可以参考下
    2015-07-07
  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    这篇文章主要介绍了js+html5实现canvas绘制网页时钟的方法,涉及html5图形绘制的基础技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • javascript数据结构之串的概念与用法分析

    javascript数据结构之串的概念与用法分析

    这篇文章主要介绍了javascript数据结构之串的概念与用法,简单讲述了串的概念、功能并结合实例形式分析了基于javascript实现串的遍历、比较、查找等相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • JS声明式函数与赋值式函数实例分析

    JS声明式函数与赋值式函数实例分析

    这篇文章主要介绍了JS声明式函数与赋值式函数,结合实例形式分析了JS函数解析的流程与执行顺序,需要的朋友可以参考下
    2016-12-12
  • 如何使用JavaScript检测空闲的浏览器选项卡

    如何使用JavaScript检测空闲的浏览器选项卡

    这篇文章主要介绍了如何使用JavaScript检测空闲的浏览器选项卡,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript BASE64算法实现(完美解决中文乱码)

    JavaScript BASE64算法实现(完美解决中文乱码)

    这篇文章主要介绍了JavaScript BASE64算法实现(完美解决中文乱码),先用escape()对中文进行编码.然后再进行base64编码. 解码时,再加入()对中文进行解码,这样就可以避免中文乱码问题
    2017-01-01
  • 从阶乘函数对比Javascript和C#的异同

    从阶乘函数对比Javascript和C#的异同

    今天学习Javascript函数,发现这完全是一个神奇的东西。跟我们平常所见强类型语言中的函数有好多不同。下面我们就从C#和JavaScript的两个计算阶乘的函数中比较两者的异同
    2012-05-05
  • 在localStorage中存储对象数组并读取的方法

    在localStorage中存储对象数组并读取的方法

    频繁ajax请求导致页面响应变慢,所以考虑将数据存储在window.storage中,这样只需请求一次ajax,接下来通过本文给大家介绍了在localStorage中存储对象数组并读取的方法,需要的朋友可以参考下
    2016-09-09

最新评论