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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

644閲覧

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

erp

総合スコア46

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/06/03 11:11

編集2021/06/03 11:19

前提・実現したいこと

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

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

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

該当のソースコード

js

1// keywords search 2 $('.target-area p').each(function (i, ele) { 3 searchWord = function () { 4 var searchResult, 5 searchText = $(this).val(), // 検索ボックスに入力された値 6 targetText, 7 hitNum; 8 // 検索結果を格納するための配列を用意 9 searchResult = []; 10 // 検索結果エリアの表示を空にする 11 $('#search-result__list').empty(); 12 $('.search-result__hit-num').empty(); 13 // 検索ボックスに値が入ってる場合 14 if (searchText != '') { 15 $('.target-area p').each(function (i, ele) { 16 targetText = $(this).text(); 17 // 検索対象となるリストに入力された文字列が存在するかどうかを判断 18 if (targetText.indexOf(searchText) != -1) { 19 // 存在する場合はそのリストのテキストを用意した配列に格納 20 searchResult.push(targetText); 21 } 22 }); 23 // 検索結果をページに出力 24 for (var i = 0; i < searchResult.length; i++) { 25 $('<p>').text(searchResult[i]).appendTo('#search-result__list'); 26 } 27 // ヒットの件数をページに出力 28 hitNum = '<span class="marker1"><span>Result</span>:' + searchResult.length + ' titles</spna>'; 29 $('.search-result__hit-num').append(hitNum); 30 } 31 } 32 var b = 1; 33 if (b < 10) { 34 $(ele).attr('data-num', '0' + b); 35 } else { 36 $(ele).attr('data-num', b); 37 } 38 b++; 39 $(ele).wrapInner('<span></span>'); 40 var c = 1; 41 if (i + c < 10) { 42 var num = $('<span>').attr("class", "num").text('0' + (i + c)); 43 } else { 44 var num = $('<span>').attr("class", "num").text(i + c); 45 } 46 $(ele).prepend(num); 47 }); 48 // searchWordの実行 49 $('#search-text').on('input', searchWord); 50 $('#search-text').on('input', function (e) { 51 var v = $(this).val(); 52 $('.target-area p').each(function (i,ele) { 53 var txt = $(ele).text(); 54 if (v !== "") txt = txt.replace(RegExp(v, 'g'), function (m) { 55 return '<span class="marker1">' + m + '</span>' 56 }); 57 }); 58 // ↑ なぜか機能しない 59 $('#search-result__list p').each(function (i,em) { 60 var data = $(em).text(); 61 var slice = data.slice( 0, 5 ); 62 var res = slice.replace(/[^0-9]/g, ''); 63 console.log(res); // 機能する 64 if (res !== "") data = data.replace(RegExp(res, 'g'), function (m) { 65 return '<span class="num">' + m + '</span>' 66 }); 67 // ↑ なぜか機能しない 68 }); 69 });

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 title"> 11 <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> 12 <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> 13 <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> 14</div>

CSS

1.title .num, #search-result__list p .num { 2 position: absolute; 3 counter-increment: cnt; 4 content: counter(cnt, decimal-leading-zero); 5 margin-left: -2.5rem; 6 padding: 0; 7 color: var(--text); 8} 9.title p, #search-result__list p { 10 margin-left: 4rem 11} 12.title p .num, #search-result__list p .num { 13 margin-left: -3rem 14}

試したこと

js

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

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

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

Firefox 最新版
Safari 604.1

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

js

1// keywords search 2 $('.target-area p').each(function (i, ele) { 3 searchWord = function () { 4 var searchResult, 5 searchText = $(this).val(), // 検索ボックスに入力された値 6 targetText, 7 hitNum; 8 // 検索結果を格納するための配列を用意 9 searchResult = []; 10 // 検索結果エリアの表示を空にする 11 $('#search-result__list').empty(); 12 $('.search-result__hit-num').empty(); 13 // 検索ボックスに値が入ってる場合 14 if (searchText != '') { 15 $('.target-area p').each(function (i, ele) { 16 targetText = $(this).html(); 17 // 検索対象となるリストに入力された文字列が存在するかどうかを判断 18 if (targetText.indexOf(searchText) != -1) { 19 // 存在する場合はそのリストのテキストを用意した配列に格納 20 searchResult.push(targetText); 21 } 22 }); 23 // 検索結果をページに出力 24 for (var i = 0; i < searchResult.length; i++) { 25 $('<p>').html(searchResult[i]).appendTo('#search-result__list'); 26 } 27 // ヒットの件数をページに出力 28 hitNum = '<span class="marker1"><span>Result</span>:' + searchResult.length + ' titles</spna>'; 29 $('.search-result__hit-num').append(hitNum); 30 } 31 } 32 var b = 1; 33 if (b < 10) { 34 $(ele).attr('data-num', '0' + b); 35 } else { 36 $(ele).attr('data-num', b); 37 } 38 b++; 39 $(ele).wrapInner('<span></span>'); 40 var c = 1; 41 if (i + c < 10) { 42 var num = $('<span>').attr("class", "num").text('0' + (i + c)); 43 } else { 44 var num = $('<span>').attr("class", "num").text(i + c); 45 } 46 $(ele).prepend(num); 47 }); 48 // searchWordの実行 49 $('#search-text').on('input', searchWord); 50 $('#search-text').on('input', function (e) { 51 var v = $(this).val(); 52 $('.target-area p').each(function (i, ele) { 53 var txt = $(this).html(); 54 if (v !== "") txt = txt.replace(RegExp(v, 'g'), function (m) { 55 return '<span class="marker1">' + m + '</span>' 56 }); 57 $(ele).html(txt); 58 }); 59 });

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

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

投稿2021/06/03 22:34

erp

総合スコア46

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問