p内の一致する文字列を<span>で囲みたい。

Question

前提・実現したいこと

リアルタイム検索で、出力される検索結果の文頭にある数字を<span>で囲みたい。

ターゲットエリアのpに振ってある番号を出力される検索結果にも反映するために、結果のp の最初の５字を抜き出し、そのうちの数字だけ取り出すことはできた。その数字と一致する数を、#search-result__list p 内で<span>で囲みたい。

もっと簡単にコードが書ける（ターゲットエリアのpに振ってある番号を出力される検索結果にも反映できる）なら、知りたいです。

該当のソースコード

// keywords search
  $('.target-area p').each(function (i, ele) {
    searchWord = function () {
      var searchResult,
        searchText = $(this).val(), // 検索ボックスに入力された値
        targetText,
        hitNum;
      // 検索結果を格納するための配列を用意
      searchResult = [];
      // 検索結果エリアの表示を空にする
      $('#search-result__list').empty();
      $('.search-result__hit-num').empty();
      // 検索ボックスに値が入ってる場合
      if (searchText != '') {
        $('.target-area p').each(function (i, ele) {
          targetText = $(this).text();
          // 検索対象となるリストに入力された文字列が存在するかどうかを判断
          if (targetText.indexOf(searchText) != -1) {
            // 存在する場合はそのリストのテキストを用意した配列に格納
            searchResult.push(targetText);
          }
        });
        // 検索結果をページに出力
        for (var i = 0; i < searchResult.length; i++) {
          $('<p>').text(searchResult[i]).appendTo('#search-result__list');
        }
        // ヒットの件数をページに出力
        hitNum = '<span class="marker1"><span>Result</span>：' + searchResult.length + ' titles</spna>';
        $('.search-result__hit-num').append(hitNum);
      }
    }
    var b = 1;
    if (b < 10) {
      $(ele).attr('data-num', '0' + b);
    } else {
      $(ele).attr('data-num', b);
    }
    b++;
    $(ele).wrapInner('<span></span>');
    var c = 1;
    if (i + c < 10) {
      var num = $('<span>').attr("class", "num").text('0' + (i + c));
    } else {
      var num = $('<span>').attr("class", "num").text(i + c);
    }
    $(ele).prepend(num);
  });
  // searchWordの実行
  $('#search-text').on('input', searchWord);
  $('#search-text').on('input', function (e) {
    var v = $(this).val();
    $('.target-area p').each(function (i,ele) {
      var txt = $(ele).text();
      if (v !== "") txt = txt.replace(RegExp(v, 'g'), function (m) {
        return '<span class="marker1">' + m + '</span>'
      });
    });
    // ↑　なぜか機能しない
    $('#search-result__list p').each(function (i,em) {
      var data = $(em).text();
      var slice = data.slice( 0, 5 );
      var res = slice.replace(/[^0-9]/g, '');
      console.log(res); // 機能する
      if (res !== "") data = data.replace(RegExp(res, 'g'), function (m) {
        return '<span class="num">' + m + '</span>'
      });
      // ↑　なぜか機能しない
    });
  });

<div class="search-area">
    <form>
       <input type="text" id="search-text" placeholder="keyword search">
    </form>
    <div class="search-result">
       <div class="search-result__hit-num"></div>
       <div id="search-result__list"></div>
    </div>
</div>
<div class="target-area title">
   <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
   <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
   <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
</div>

.title .num, #search-result__list p .num {
    position: absolute;
    counter-increment: cnt;
    content: counter(cnt, decimal-leading-zero);
    margin-left: -2.5rem;
    padding: 0;
    color: var(--text);
}
.title p, #search-result__list p {
  margin-left: 4rem
}
.title p .num, #search-result__list p .num {
  margin-left: -3rem
}

試したこと

 $('#search-text').on('input', function (e) {
    var v = $(this).val();
    $('.target-area p').each(function (i,ele) {
      var txt = $(ele).text();
      if (v !== "") txt = txt.replace(RegExp(v, 'g'), function (m) {
        return '<span class="marker1">' + m + '</span>'
      });
    });
    // ↑　なぜか機能しない
    $('#search-result__list p').each(function (i,em) {
      var data = $(em).text();
      var slice = data.slice( 0, 5 );
      var res = slice.replace(/[^0-9]/g, '');
      console.log(res); // 機能する
      if (res !== "") data = data.replace(RegExp(res, 'g'), function (m) {
        return '<span class="num">' + m + '</span>'
      });
      // ↑　なぜか機能しない
    });

ターゲットエリアのハイライト、結果の数字を<span>で囲むことがうまくいかなかった。なぜかわからない。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版
Safari 604.1

Answer 1

// keywords search
  $('.target-area p').each(function (i, ele) {
    searchWord = function () {
      var searchResult,
        searchText = $(this).val(), // 検索ボックスに入力された値
        targetText,
        hitNum;
      // 検索結果を格納するための配列を用意
      searchResult = [];
      // 検索結果エリアの表示を空にする
      $('#search-result__list').empty();
      $('.search-result__hit-num').empty();
      // 検索ボックスに値が入ってる場合
      if (searchText != '') {
        $('.target-area p').each(function (i, ele) {
          targetText = $(this).html();
          // 検索対象となるリストに入力された文字列が存在するかどうかを判断
          if (targetText.indexOf(searchText) != -1) {
            // 存在する場合はそのリストのテキストを用意した配列に格納
            searchResult.push(targetText);
          }
        });
        // 検索結果をページに出力
        for (var i = 0; i < searchResult.length; i++) {
          $('<p>').html(searchResult[i]).appendTo('#search-result__list');
        }
        // ヒットの件数をページに出力
        hitNum = '<span class="marker1"><span>Result</span>：' + searchResult.length + ' titles</spna>';
        $('.search-result__hit-num').append(hitNum);
      }
    }
    var b = 1;
    if (b < 10) {
      $(ele).attr('data-num', '0' + b);
    } else {
      $(ele).attr('data-num', b);
    }
    b++;
    $(ele).wrapInner('<span></span>');
    var c = 1;
    if (i + c < 10) {
      var num = $('<span>').attr("class", "num").text('0' + (i + c));
    } else {
      var num = $('<span>').attr("class", "num").text(i + c);
    }
    $(ele).prepend(num);
  });
  // searchWordの実行
  $('#search-text').on('input', searchWord);
  $('#search-text').on('input', function (e) {
    var v = $(this).val();
    $('.target-area p').each(function (i, ele) {
      var txt = $(this).html();
      if (v !== "") txt = txt.replace(RegExp(v, 'g'), function (m) {
        return '<span class="marker1">' + m + '</span>'
      });
      $(ele).html(txt);
    });
  });

このコードでできました。

変更点は、$(this).text();　などを html　に変更したことです。