javascriptで検索機能を実装したのですが、上手く機能しません。

Question

https://jsfiddle.net/MrTK1230/71vuuvo1/

上記のサイトで作業をしています

検索したら対象文字がハイライトされ、別の単語を検索したら今のハイライトを削除して検索対象文字にハイライトを付加するというコードを書きたいのですが、
消えるときときえないときがでてしまいます。
原因がわかりません。わかる方お願いします

<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>

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});
    }
  });
});

/* highloght */
.thread p{
  line-height: 1.6;
}
.high .highlight{
  background-color: #fffd77;
}

改善後

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>

Answer 1

//カタカナでもひらがなでもヒットするように2つ必要

としているところで英数字などカタカナでもひらがなでもないものを排除していないので、「aaa」で1回検索すると下記のようになります。で、replaceで消すのが1つずつになるため当然1個余分に残ります。

<span class="highlight"><span class="highlight">aaa</span></span>

Comments

[drizzing20]

回答ありがとうございます。回答をもとに修正したつもりなのですが、上手く行きませんでした。もう少し教えていただいてもよろしいでしょうか

[kei344]

<span class="highlight"><span class="highlight"><span class="highlight"><span class="highlight">aaa</span></span></span></span>
次は三つに増えましたね。

searchWordkata = searchWord.replace(/*略*/);
searchWordkana = searchWord.replace(/*略*/);
は
searchWord === searchWordkata === searchWordkana
になることがあります。（むしろ成らない事のほうが限定的）

例えば「aaa」と入れた場合、
$item.removeClass("is-hidden").html($item.html().replace(new RegExp('aaa'+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
$item.removeClass("is-hidden").html($item.html().replace(new RegExp('aaa'+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
$item.removeClass("is-hidden").html($item.html().replace(new RegExp('aaa'+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
と3回繰り返すことになります。

「is-hiddenのクラスを持つ要素に囲まれていない」という条件を正規表現でがんばるか、
/* 置換処理1回目 */
if ( searchWordkata !== searchWordkana ) {/* 置換処理2回目 */}
とかする感じでしょうか。

また、下記で消していますが、
$item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
highlightが出てくる間繰り返し置換することで「残ってしまう」事は回避出来ます。（二重にしなければその処理は必要ないのでかなり対処療法）