概要

大文字小文字関係なく検索し、検索キーワードにタグを付与したく、つくってみました。

コード

動作サンプルはこちら
http://jsdo.it/tsunet111/qX4C


//ボタンをクリックしたら
$('#btn-search').click(function(){
    //置換元になるテキスト
    var basetext = $('#target-text').text();
    //置換するワード
    var searchtext = $('#input-text').val();
    //置換するワードの文字数
    var len = searchtext.length;
    //置換元、キーワードともに、小文字にする
    var basetext_s = basetext.toLowerCase();
    var searchtext_s = searchtext.toLowerCase();
    var wordList = new Array();
    var idx = 0;
    var cnt = 0;
    var flg = true;
    if(searchtext===''){
        //キーワードが空の場合は、タグを外した状態でHTML出力。
        $('#target-text').html(basetext);
    }else{
        //キーワードの出現位置を取得して配列にいれる
        do {
            var num = basetext_s.indexOf(searchtext_s, idx);
            if(num===-1){
                flg = false;
            }else{
                wordList.push(num);
                idx = num+1;
            }
        }while(flg);
        if(wordList.length===0){
            //キーワードが見つからなかったらHTML出力。
            $('#target-text').html(basetext);
        }else{
            //キーワードとその前後を順に取得して配列に入れていく。キーワードにはタグを付与する。
            var outarr = new Array();
            idx = 0;
            for(cnt=0;cnt<wordList.length;cnt++){
                if(wordList[cnt]===idx){
                    //キーワード箇所
                    outarr.push('<span class="hilight">'+basetext.substring(idx,idx+len)+'</span>');
                    idx += len;
                }else{
                    //キーワード前のテキスト＋キーワード箇所
                    outarr.push(basetext.substring(idx,wordList[cnt]));
                    idx = wordList[cnt];
                    outarr.push('<span class="hilight">'+basetext.substring(idx,idx+len)+'</span>');
                    idx += len;
                }
                if(cnt===wordList.length-1){
                    if(idx < basetext.length){
                        //最後のキーワードの後のテキスト
                        outarr.push(basetext.substring(idx,basetext.length));
                    }
                }
            }
            //配列を結合してHTML出力。
            $('#target-text').html(outarr.join(''));
        }
    }
});

さいごに

力技で実装したので、もっと効率よい書き方がありそうですが…