1. 程式人生 > >js實現搜尋字高亮

js實現搜尋字高亮

<script type="text/javascript">
//<![CDATA[ 
    //--------begin function fHl(o, flag, rndColor, url)------------------// 
    function fHl(o, flag, rndColor, url){ 
        /// <summary>
        ///     使用 javascript HTML DOM 高亮顯示頁面特定字詞.
        ///     例項:
        ///         fHl(document.body, '紙傘|她'); 
        ///         這裡的body是指高亮body裡面的內容。
        ///         fHl(document.body, '希望|愁怨', false, '/'); 
        ///         fHl(document.getElementById('at_main'), '獨自|飄過|悠長', true, 'search.asp?keyword='); 
        ///         這裡的'at_main'是指高亮id='at_main'的div裡面的內容。search.asp?keyword=指給關鍵字加的連結地址,
        ///         我這裡加了一個引數,在後面要用到。可以是任意的地址。        
        /// </summary>
        /// <param name="o" type="Object">
        ///     物件, 要進行高亮顯示的物件. 
        /// </param>
        /// <param name="flag" type="String">
        ///     字串, 要進行高亮的詞或多個詞, 使用 豎槓(|) 分隔多個詞 . 
        /// </param>
        /// <param name="rndColor" type="Boolean">
        ///     布林值, 是否隨機顯示文字背景色與文字顏色, true 表示隨機顯示. 
        /// </param>
        /// <param name="url" type="String">
        ///     URI, 是否對高亮的詞新增連結.
        /// </param>                        
        /// <return></return>
        var bgCor=fgCor=''; 
        if(rndColor){ 
            bgCor=fRndCor(10, 20); 
            fgCor=fRndCor(230, 255); 
        } else { 
            bgCor='#F0F'; 
            fgCor='black'; 
        } 
        var re=new RegExp(flag, 'i'); 
        for(var i=0; i<o.childNodes.length; i++){     
            var o_=o.childNodes[i]; 
            var o_p=o_.parentNode; 
            if(o_.nodeType==1) { 
                fHl(o_, flag, rndColor, url);                 
             } else if (o_.nodeType==3) { 
                if(!(o_p.nodeName=='A')){ 
                    if(o_.data.search(re)==-1)continue; 
                    var temp=fEleA(o_.data, flag); 
                    o_p.replaceChild(temp, o_); 
                } 
            }
        } 
        //------------------------------------------------ 
        function fEleA(text, flag){ 
            var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' 
            var o=document.createElement('span'); 
            var str=''; 
            var re=new RegExp('('+flag+')', 'gi'); 
            if(url){ 
                str=text.replace(re, '<a href="'+url+ 
                '$1"'+style+'>$1</a>'); //這裡是給關鍵字加連結,紅色的$1是指上面連結地址後的具體引數。
            } else { 
                str=text.replace(re, '<span '+style+'>$1</span>'); //不加連結時顯示
            } 
            o.innerHTML=str; 
            return o; 
        } 
        //------------------------------------------------ 
        function fRndCor(under, over){ 
            if(arguments.length==1){ 
                var over=under; 
                    under=0; 
            }else if(arguments.length==0){ 
                var under=0; 
                var over=255; 
            } 
            var r=fRandomBy(under, over).toString(16); 
                r=padNum(r, r, 2); 
            var g=fRandomBy(under, over).toString(16); 
                g=padNum(g, g, 2); 
            var b=fRandomBy(under, over).toString(16); 
                b=padNum(b, b, 2); 
                //defaultStatus=r+' '+g+' '+b 
            return '#'+r+g+b; 
            function fRandomBy(under, over){ 
                switch(arguments.length){ 
                    case 1: return parseInt(Math.random()*under+1); 
                    case 2: return parseInt(Math.random()*(over-under+1) + under); 
                    default: return 0; 
                } 
            }
            function padNum(str, num, len){ 
                var temp='' 
                for(var i=0; i<len;temp+=num, i++); 
                return temp=(temp+=str).substr(temp.length-len); 
            } 
        } 
    }
    //--------end function fHl(o, flag, rndColor, url)--------------------// 
//]]> 

</script>

最後呼叫方法:

<script type="text/javascript">
fHl(document.body, '高亮');   //對頁面body的區域中的“高亮”文字背景著色
</script>

相關推薦

js實現搜尋

<script type="text/javascript">//<![CDATA[     //--------begin function fHl(o, flag, rndColor, url)------------------//     funct

jQuery實現搜尋內容顯示

<html> <head> <meta charset="UTF-8"> <title>jQuery搜尋高亮顯示</title>

elasticsearch5.5.2用javaAPI實現搜尋結果顯示和搜尋建議

前言:像百度、360搜尋等等,我們輸入完搜尋條件時,他會自動出來一個提示框,將我們輸入的關鍵詞進行自動補全,即搜尋推薦。當我們點選搜尋後,返回的搜尋結果中會將我們搜尋的內容進行高亮的顯示(不同顏色標記出來),強大的elasticsearch就提供了這些功能。在這裡我會使用ja

JavaScript正則方法replace實現搜尋關鍵字

前言 正則表示式是字串處理工具中強有力的工具.也有人認為這只是一個小玩具,但不管怎麼說都離不開它. 這裡介紹的是JavaScript的正則表示式的replace方法 ,和實現搜尋關鍵字高亮的功能. 先介紹一下正則表示式的replace方法 正則表

JS實現查詢關鍵詞效果

var newHtml = html.replace(regExp, "<span class='highlight'>" + searchText + '</span>'); //將找到的關鍵字替換,加上highlight屬性;

使用textSearch.js實現關鍵詞搜尋,並搜尋結果顯示

引用塊內容 今天我們介紹的這個外掛來著http://www.zhangxinxu.com/wordpress/,張鑫旭的文章寫得挺好的,大家有興趣的多看看。 我們今天的這個外掛叫“jq

兩種簡單實現菜單顯示的JS類(轉載)

on() pos 菜單高亮 href 不同的 index body -m ear 兩種簡單實現菜單高亮顯示的JS類 近期在寫一個博客管理後臺的前端,涉及在同一頁面兩種高亮顯示當前菜單的需求.記得當年寫靜態頁時,為了實現高亮都是在每個頁面加不同的樣式,呵.高亮

js程式碼實現查詢關鍵字顯示

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>程式碼實現查詢關鍵字高亮顯示</title> <style type="

springDataSolr搜尋關鍵詞實現

@Service(timeout=5000) public class ItemSearchServiceImpl implements ItemSearchService{     @Autowired     private SolrT

zTree實現模糊搜尋顯示

zTree是一個常用的樹外掛,本身對搜尋功能封裝的不是太完美,為了實現下列效果我對其進行了二次封裝。 首先,在定義tree時我們將它高亮和普通顯示的樣式定義好。 var setting = { view:

Ghost本地安裝highlight.js使代碼

寫博客 路徑 繼續 net this 點擊 pri handlebar length 對於程序猿寫博客來說,這代碼高亮是起碼的要求。可是Ghost本身沒有支持高亮代碼。可是能夠通過擴展來實現,它就是highlight.js——附官方站點,看了下首頁介紹,

JTree 如何實現節點,如何實現排選,如何實現滑鼠移動

先上圖,看看是不是你們想要的類似效果: 滑鼠移動到樹節點所在行的任意位置,實現高亮。 滑鼠點選到樹節點所在行的任意位置,實現高亮並選中該節點。 網上找了好久都沒找到這樣的實現方法,可能是swing 現在用的人太少了。 在這裡希望能為想要用swing JTree的朋友提供一點參考

ElasticSearch的搜尋關鍵字

一:需求:搜尋一本書的題目,搜尋關鍵字高亮加粗顯示,(根據title中的文字進行全文搜尋,展示出結果來,統計搜尋時間了,返回記錄數).      1. 使用技術如下       &n

搜尋關鍵字顯示方法

{                        //sqlstr 待查詢的關鍵字            //str 已經查詢到帶有關鍵字的字串            int len=sqlkey.Length;            int len1=str.Length;                 

selector實現按鈕選中效果原理

按鈕選中高亮常規程式碼如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">

如何實現Linux下關鍵字的tail -f功能

公司內部一哥們釋出到郵件列表中的一個小tip,挺有意思,屬於程式設計師的“奇淫技巧”類吧,值得記錄一下。 如果你在linux下工作,那用tail -f跟蹤一個日誌檔案的輸出內容應該是家常便飯了。 但是,有時你更關心的是一些敏感字詞,希望能夠在動態跟蹤的同

VUE:vue 搜尋結果顯示關鍵字(父+子)

1. 需要解決的問題 父元件將搜尋的欄位傳到子元件 子元件接受資料,正則匹配,並替換欄位 2. 具體程式碼 父元件程式碼 <template> <div> <div v-if="showMe"> <

JS 選單內容關聯滾動監聽

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s

WPF搜尋關鍵字顯示

目標:在WPF中,對lucene.net進行全文檢索後的結果中包含的關鍵字進行高亮顯示。 檢索結果中的關鍵字高亮顯示,在網頁中顯示是很簡單的,lucene中加標籤樣式就可以了,可是在WPF中就不行了。 我在WPF中用GridControl顯示搜尋結果列表,GridContr

搜尋關鍵字(不區分大小寫)

inputHandle () { if (this.keyword.length > 0) { axios('/api/article/getArticleByKeyword?keyword=' + this.keyword).then((