質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 168

score 20

前提・実現したいこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

// 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 に変更したことです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る