Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

コード

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

さいごに

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

tsunet111
エレファンキューブというデジタル教材に特化した制作会社の代表。長らくFlash/ActionScripがメインでしたが、最近は、JavaScript、PHP、MYSQLなど必要に応じて使う。Facebookで「PhoneGap/Cordova 日本語グループ」運営中→ https://www.facebook.com/groups/phonegap.cordova.jp/
http://www.elephancube.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした