JavaScript識別網(wǎng)頁關(guān)鍵字并進行描紅的方法
更新時間：2015年11月09日 10:42:51 作者：企鵝
這篇文章主要介紹了JavaScript識別網(wǎng)頁關(guān)鍵字并進行描紅的方法,通過字符串的遍歷、匹配及動態(tài)添加等操作實現(xiàn)識別與描紅的功能,非常簡單實用,需要的朋友可以參考下
本文實例講述了JavaScript識別網(wǎng)頁關(guān)鍵字并進行描紅的方法。分享給大家供大家參考，具體如下：
這里演示JavaScript智能識別網(wǎng)頁關(guān)鍵字并加紅顯示出來，相信這個效果大家不陌生吧，用JS加紅關(guān)鍵字要比程序控制輸出好得多，必竟將一部分功能交給了客戶瀏覽器，相應(yīng)減輕了服務(wù)器的壓力。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS查詢替換關(guān)鍵字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<div>我是標題:這里是文字介紹!</div>
<div>我是老二:老二的描述性文字。</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
var text = divs[i].innerHTML;
var index = text.indexOf(':');
var span = document.createElement('span');
span.innerHTML = text.substring(0,index+1);
divs[i].innerHTML = text.substring(index+1);
divs[i].insertBefore(span,divs[i].firstChild);
}
</script>
</body>
</html>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄趈s中實現(xiàn)郵箱格式的驗證方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js?字符串反轉(zhuǎn)(倒序)的幾種方式總結(jié)
這篇文章主要介紹了js?字符串反轉(zhuǎn)(倒序)的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了js實現(xiàn)照片墻功能的方法,以一個完整實例形式分析了js實現(xiàn)照片墻的css與js的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法
這篇文章主要介紹了JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法,涉及javascript與jQuery操作窗口元素的相關(guān)技巧,需要的朋友可以參考下2017-04-04
點擊按鈕或鏈接時不跳轉(zhuǎn)只刷新頁面，在某些情況下還是比較實用的，下面整理些不錯的示例，感興趣的朋友可以參考下2013-10-10
JavaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法
下面小編就為大家?guī)硪黄狫avaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了微信小程序制作扭蛋機代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
讓innerHTML的腳本也可以運行起來...2006-07-07
這篇文章主要幫助大家輕松掌握JavaScript策略模式，什么是js策略模式，感興趣的小伙伴們可以參考一下2016-08-08
想必大家對Function.prototype.bind并不陌生吧，下面為大家介紹下它的簡單調(diào)用及DOM調(diào)用，感興趣的朋友可以參考下2013-09-09