検索結果にもターゲットに振った番号を反映させたい

Question

前提・実現したいこと

リアルタイム検索で、ターゲットエリアの文章にcss counterで文頭に番号を振っています。検索結果にもその番号を反映させたいのですがやり方が分かりません。大幅にコードを書き替えることなく、書き足す形で実現したいです。
参考：https://www.tam-tam.co.jp/tipsnote/javascript/post11315.html

---

結果（#search-result__list）に出力された<p>の内容が、<p>112あのイーハトーヴォの</p>　のように、数字と内容が一続きになってしまうのですが、どうすれば数字を<span>で囲めますか？

また、ハイライトのコードと、上記のコードが機能しません。よく分からないです。

該当のソースコード

// keywords search
  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 (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 i = 1;
  $('.target-area.al p').each(function () {
    if (i < 10) {
      $(this).attr('data-num', '0' + i);
    } else {
      $(this).attr('data-num', i);
    }
    i++;
  });
  $('.target-area p').each(function (i,ele) {
    $(ele).wrapInner('<span></span>');
    if( i+1 < 10 ) {
      var num = $('<span>').attr("class","num").text('0'+(i+1));
    } else {
      var num = $('<span>').attr("class","num").text(i+1);
    }
    $(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, '');
      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
}

試したこと

// 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, '');
      if (res !== "") data = data.replace(RegExp(res, 'g'), function (m) {
        return '<span class="num">' + m + '</span>'
      });
    });

こちら、エラーないのに、どちらのコードも機能しません。なぜ？

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

Firefox 最新
Safari 604.1

Answer 1

せっかくeachメソッドにインデックスがあるので、それを取得したらいいのではないでしょうか？

   $('.target-area p').each(function (i,ele) {
        let txt = $(ele).text();
        let num = $('<span>').attr("class","marker1").text(i+1);
	let ptag = $(ele).text(txt).prepend(num);
        $('#search-result__list').append(ptag);
    });

大事なポイントは先にtextメソッドで文字列だけ代入して、後でprependメソッドで<span>タグを代入します。これの順番が逆だと、あとのtextメソッドだけが有効になってしまい、番号を振ることができません。

こうなっていることを確認できました。

<p>
<span class="marker1">1</span>
"あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。"
</p>

Comments

[erp]

ありがとうございます。結果の方にも数字を反映させることができました。

しかし、結果に出力された<p>の内容が、<p>112あのイーハトーヴォの</p>　のように、数字と内容が一続きになってしまうのですが、どうすれば数字を<span>で囲めますか？

[FKM]

数字だけをspanで囲みたいのならば、wrapInnerの部分は不要です。ブラウザの開発画面で確認してもらえばいいですが、数値だけが<span>で囲まれている状態になっていますよ。

[erp]

すみません、target-area の出力は今のままでいいのです。
#search-result__list に出力された結果が <p>01内容</p>みたいになってしまうことです。

[FKM]

修正しました。これでどうでしょうか？

[erp]

ありがとうございます。

大変恐縮なのですが、#search-result__list　の p は検索した文字列に一致た文字を含む文で、上げていただいた方法だと検索の結果が反映されません。

そこで、試したことにあるように、#search-result__list p の文頭の数字だけを取り出してみました（res）。しかし、その下の if　での置換が上手くできませんでした。

#search-result__list p内の取り出した文字列（res）を <span> で囲むにはどうすればいいのでしょうか。
度々本当にすみません。

[FKM]

文字列は文字列でspanタグで囲みたいなら、最初に告げた通りに
let elem = $(ele).wrapInner('<span>');
これで対応できませんかね。

[erp]

それはどちらでもいいです。

if (searchText != '') {} 内で検索結果を出力しているのが、上記の方法だと反映されない点についてです。

ともあれ、最初の質問から随分離れてしまったので、新しく質問を立てました。

右も左も分からないところをお助けいただきありがとうございました。

Answer 2

$(this).text()

こちらで取得できるのはtextContentです。文字列。

対してparent()はあくまで「対象の要素の親」を取得しようとします。

文字列に対してparent()はあてられないので今回の現象が起きています。

pに対してdata-numつけてるなら単純に下記で良いのでは。

console.log( $(this).data('num') );

あと、thisが渋滞しているので整理したほうがいいかもしれません。

※未検証

  $('#search-text').on('input', function (e) {
    var v = $(e.currentTarget).val();
    $('.target-area p').each(function (i,ele) {
      var txt = $(ele).text();
console.log( $(ele).data('num') );
      //~~~中略

    });
  });

Comments

[erp]

簡略化ありがとうございます。直してみました。
しかし提示していただいた式だと、検索でふるいにかけた文だけではなく、すべての文のdata-をコンソールに示すので、目的に適わなくなってしまうのかなと思いました。

[m.ts10806]

コード内のコメントに書いた通り、中略してるのであとは補完してください。