效果圖：
話不多說，請看代碼：
<!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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
