リアルタイム検索でハイライトしたい

前提・実現したいこと

リアルタイム検索で、ターゲットエリアの該当文字列（検索する文字）をハイライトしたいがやり方が分からない。
参考：https://www.tam-tam.co.jp/tipsnote/javascript/post11315.html

該当のソースコード

JS
1// keywords search
2  searchWord = function () {
3    var searchResult,
4      searchText = $(this).val(), // 検索ボックスに入力された値
5      targetText,
6      hitNum;
7
8    // 検索結果を格納するための配列を用意
9    searchResult = [];
10
11    // 検索結果エリアの表示を空にする
12    $('#search-result__list').empty();
13    $('.search-result__hit-num').empty();
14
15    // 検索ボックスに値が入ってる場合
16    if (searchText != '') {
17      $('.target-area p').each(function () {
18        targetText = $(this).text();
19        
20        // 検索対象となるリストに入力された文字列が存在するかどうかを判断
21        if (targetText.indexOf(searchText) != -1) {
22          // 存在する場合はそのリストのテキストを用意した配列に格納
23          searchResult.push(targetText);
24        }
25      });
26
27      // 検索結果をページに出力
28      for (var i = 0; i < searchResult.length; i++) {
29        $('<p>').text(searchResult[i]).appendTo('#search-result__list');
30      }
31
32      // ヒットの件数をページに出力
33      hitNum = '<span class="marker"><span>Result</span>：' + searchResult.length + ' titles</spna>';
34      $('.search-result__hit-num').append(hitNum);
35      
36    }
37  };
38
39  // searchWordの実行
40  $('#search-text').on('input', searchWord);

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

やりたいこと

ターゲットエリアの該当文字列を span.marker で囲みたい。
現在のコードに書き足す形で実現したい。

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

Firefox 最新ver
Safari 604.1

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2$(function(){
3  $('#search-text').on('input',function(){
4    var v=$(this).val();
5    $('.target-area p').each(function(){
6      var txt=$(this).text();
7      if(v!=="") txt=txt.replace(RegExp(v,'g'),function(m){return '<span>'+m+'</span>'});
8      $(this).html(txt);
9    });
10  });
11});
12</script>
13<style>
14.target-area p span{background-Color:yellow}
15</style>