JavaScript 過濾關(guān)鍵字
更新時間：2017年03月20日 14:09:04 作者：pigletzzz
本文主要介紹了JavaScript過濾關(guān)鍵字的方法。具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
話不多說，請看代碼：
<!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) {
/**
* 一個程序的標(biāo)準(zhǔn)準(zhǔn)則
* 1. 可用, 可以實(shí)現(xiàn)核心的需求
* 2. 健壯, 兼容性處理, 邊界處理, 異常處理, 用戶輸入校驗(yàn)
* 3. 可靠, 任何時候都要有返回值
* 4. 寬容, 對需求寬容, 對調(diào)用著寬容, 對維護(hù)者寬容
* 5. 精益求精, 可靠的注釋...
*/
try {
// 檢測是否為 undefined 或者為一個數(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('出錯啦~' + e);
}
}
// 調(diào)用
var arr = ['Java','關(guān)鍵字', '方法'];
var params = document.querySelector('#cont');
filterContent(arr, params);
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
詳解Js 根據(jù)文件夾目錄獲取Json數(shù)據(jù)輸出demo
這篇文章主要為大家介紹了Js 根據(jù)文件夾目錄獲取Json數(shù)據(jù)輸出示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
javascript實(shí)現(xiàn)的簡單的表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)的簡單的表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-07-07
js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁時鐘的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁時鐘的方法,涉及html5圖形繪制的基礎(chǔ)技巧，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡單講述了串的概念、功能并結(jié)合實(shí)例形式分析了基于javascript實(shí)現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
JS聲明式函數(shù)與賦值式函數(shù)實(shí)例分析
這篇文章主要介紹了JS聲明式函數(shù)與賦值式函數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)解析的流程與執(zhí)行順序,需要的朋友可以參考下2016-12-12
如何使用JavaScript檢測空閑的瀏覽器選項(xiàng)卡
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項(xiàng)卡，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
JavaScript BASE64算法實(shí)現(xiàn)(完美解決中文亂碼)
這篇文章主要介紹了JavaScript BASE64算法實(shí)現(xiàn)(完美解決中文亂碼),先用escape()對中文進(jìn)行編碼.然后再進(jìn)行base64編碼. 解碼時,再加入()對中文進(jìn)行解碼,這樣就可以避免中文亂碼問題2017-01-01
今天學(xué)習(xí)Javascript函數(shù)，發(fā)現(xiàn)這完全是一個神奇的東西。跟我們平常所見強(qiáng)類型語言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個計(jì)算階乘的函數(shù)中比較兩者的異同2012-05-05
在localStorage中存儲對象數(shù)組并讀取的方法
頻繁ajax請求導(dǎo)致頁面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲在window.storage中，這樣只需請求一次ajax，接下來通過本文給大家介紹了在localStorage中存儲對象數(shù)組并讀取的方法,需要的朋友可以參考下2016-09-09