Rumah > Artikel > hujung hadapan web > JavaScript 过滤关键字实例详解

JavaScript 过滤关键字实例详解

怪我咯asal: 2017-07-07 10:34:042043semak imbas

本文主要介绍了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 = [&#39;Java&#39;,&#39;关键字&#39;, &#39;方法&#39;],
// arrText = arr.join(&#39;|&#39;),
// var params = document.querySelector(&#39;#cont&#39;);
//
// // 替换关键字
// 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 === &#39;undefined&#39; || !(keyArr instanceof Array) || keyArr.length < 1) return -1;
 // 将数组里面的元素以 | 进行合并方便进行正则比较, 如 张三|李四
 var arrTxt = keyArr.join(&#39;|&#39;),
  regObj = new RegExp(arrTxt, &#39;ig&#39;);
 // 替换关键字
 ele.innerHTML = ele.innerHTML.replace(regObj, "<em>$&</em>");
 } catch (e) {
 console.log(&#39;出错啦~&#39; + e);
 }

 }
 // 调用
 var arr = [&#39;Java&#39;,&#39;关键字&#39;, &#39;方法&#39;];
 var params = document.querySelector(&#39;#cont&#39;);
 filterContent(arr, params);
 </script>
</body>
</html>

Atas ialah kandungan terperinci JavaScript 过滤关键字实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript定义常量实例详解Artikel seterusnya：js里的this关键字的理解

Artikel berkaitan

Lihat lagi