快捷導(dǎo)航

JavaScript 過濾關(guān)鍵字

更新時(shí)間：2017年03月20日 14:09:04 作者：pigletzzz

本文主要介紹了JavaScript過濾關(guān)鍵字的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

話不多說，請(qǐng)看代碼：

<!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過濾關(guān)鍵字的方法JavaScript過濾關(guān)鍵字的方法</p>
 <script>
 //================================= 可用狀態(tài)代碼 =====================================
// var arr = ['Java','關(guān)鍵字', '方法'],
// arrText = arr.join('|'),
// var params = document.querySelector('#cont');
//
// // 替換關(guān)鍵字
// params.innerHTML = params.innerHTML.replace(new RegExp(arrText, "ig"), "<em>$&</em>");
// var arr = [];
// console.log(arr);

//================================= 修改后的代碼 =====================================
 /**
 * 過濾關(guān)鍵字
 * @param keyArr 需要過濾的關(guān)鍵字?jǐn)?shù)組
 * @param ele 過濾的節(jié)點(diǎn)
 */
 function filterContent(keyArr, ele) {
 /**
 * 一個(gè)程序的標(biāo)準(zhǔn)準(zhǔn)則
 * 1. 可用, 可以實(shí)現(xiàn)核心的需求
 * 2. 健壯, 兼容性處理, 邊界處理, 異常處理, 用戶輸入校驗(yàn)
 * 3. 可靠, 任何時(shí)候都要有返回值
 * 4. 寬容, 對(duì)需求寬容, 對(duì)調(diào)用著寬容, 對(duì)維護(hù)者寬容
 * 5. 精益求精, 可靠的注釋...
 */
 try {
 // 檢測是否為 undefined 或者為一個(gè)數(shù)組，或者數(shù)組長度是否大于 1, 這里的返回 -1 只是為了有返回值, 也可以不寫
 if (keyArr === 'undefined' || !(keyArr instanceof Array) || keyArr.length < 1) return -1;
 // 將數(shù)組里面的元素以 | 進(jìn)行合并方便進(jìn)行正則比較, 如 張三|李四
 var arrTxt = keyArr.join('|'),
  regObj = new RegExp(arrTxt, 'ig');
 // 替換關(guān)鍵字
 ele.innerHTML = ele.innerHTML.replace(regObj, "<em>$&</em>");
 } catch (e) {
 console.log('出錯(cuò)啦~' + e);
 }

 }
 // 調(diào)用
 var arr = ['Java','關(guān)鍵字', '方法'];
 var params = document.querySelector('#cont');
 filterContent(arr, params);
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: