#概要
大文字小文字関係なく検索し、検索キーワードにタグを付与したく、つくってみました。
#コード
動作サンプルはこちら
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(''));
}
}
});
##さいごに
力技で実装したので、もっと効率よい書き方がありそうですが…