Maison > Article > interface Web > Explication détaillée des exemples de mots-clés de filtre JavaScript

Explication détaillée des exemples de mots-clés de filtre JavaScript

怪我咯original: 2017-07-07 10:34:042043parcourir

Cet article présente principalement la méthode JavaScript de filtrage des mots-clés. A une très bonne valeur de référence. Jetons-y un coup d'oeil avec l'éditeur ci-dessous

Rendu :

Sans plus tarder, veuillez regarder le code :

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des instances constantes définies en JavaScriptArticle suivant：Explication détaillée des instances constantes définies en JavaScript

Articles Liés

Voir plus