Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@tsunet111

JSで大文字小文字関係なく検索、タグを付与する

概要

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

コード

動作サンプルはこちら
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(''));
        }
    }
});

さいごに

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?