質問編集履歴

1 回答頂いた内容で修正しました。

drizzing20

drizzing20 score 363

2016/11/10 23:19  投稿

javascriptで検索機能を実装したのですが、上手く機能しません。
https://jsfiddle.net/MrTK1230/71vuuvo1/
上記のサイトで作業をしています
検索したら対象文字がハイライトされ、別の単語を検索したら今のハイライトを削除して検索対象文字にハイライトを付加するというコードを書きたいのですが、
消えるときときえないときがでてしまいます。
原因がわかりません。わかる方お願いします
```HTML
<form class="form" method="POST" name="form1"><input class="textarea" name="word" type="text" />
<input type="submit" value="検索" /></form></div>
<div class="thread">
<div class="high">
<ul>
<li>
aaa
</li>
<li>
aaa111
</li>
</ul>
```
```JavaScript
jQuery(document).ready(function($) {
 var $thread = $(".high");
 var $form = $(".form:first");
 var $input = $(".textarea:first");
 var $lis  = $thread.find("> ul > li");
 $form.on("submit", function(e){
   var liArr = [];
   e.preventDefault();
   $lis.each(function(){
     liArr.push($(this).text().toLowerCase());
     $item = $(this);
     $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
   });
   var searchWord = $.trim($input.val()).toLowerCase();
   //ひらがなをカタカナでも検索可能
   searchWordkata = searchWord.replace(/[ぁ-ん]/g, function(s) {
     return String.fromCharCode(s.charCodeAt(0) + 0x60);
   });
   //カタカナをひらがなでも検索可能
   searchWordkana = searchWord.replace(/[ァ-ン]/g, function(s) {
     return String.fromCharCode(s.charCodeAt(0) - 0x60);
   });
   if(searchWord.length){
     for(var li in liArr){
       $item = $lis.eq(li);
       if( liArr[li].indexOf(searchWordkata) != -1 || liArr[li].indexOf(searchWordkana) != -1){
         //カタカナでもひらがなでもヒットするように2つ必要
         $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkana+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
         $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkata+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
       }
     }
     $("html,body").animate({scrollTop:$(".highlight").offset().top});
   }
 });
});
```
```CSS
/* highloght */
.thread p{
 line-height: 1.6;
}
.high .highlight{
 background-color: #fffd77;
}
```  
 
改善後  
```JavaScript  
jQuery(document).ready(function($) {  
 var $thread = $(".high");  
 var $form = $(".form:first");  
 var $input = $(".textarea:first");  
 var $lis  = $thread.find("> ul > li");  
 
 $form.on("submit", function(e){  
   var liArr = [];  
   e.preventDefault();  
   $lis.each(function(){  
     liArr.push($(this).text().toLowerCase());  
     $item = $(this);  
     $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));  
   });  
   var searchWord = $.trim($input.val()).toLowerCase();  
 
   //ひらがなをカタカナでも検索可能  
   searchWordkata = searchWord.replace(/[ぁ-ん]/g, function(s) {  
     return String.fromCharCode(s.charCodeAt(0) + 0x60);  
   });  
   //カタカナをひらがなでも検索可能  
   searchWordkana = searchWord.replace(/[ァ-ン]/g, function(s) {  
     return String.fromCharCode(s.charCodeAt(0) - 0x60);  
   });  
 
   if(searchWord.length){  
     for(var li in liArr){  
       $item = $lis.eq(li);  
       if( liArr[li].indexOf(searchWordkata) != -1 || liArr[li].indexOf(searchWordkana) != -1 || liArr[li].indexOf(searchWord) != -1){  
         //カタカナでもひらがなでもヒットするように2つ必要  
         $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkana+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));  
         $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkata+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));  
         $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWord+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));  
       }  
     }  
     $("html,body").animate({scrollTop:$(".highlight").offset().top});  
   }  
 });  
});  
</script>  
```
  • JavaScript

    29449 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る