html
1<div id="message_contents_search_2250" class="message_contents fs14"> 2<span class="search_word">あ</span>かさたなはまやらわあかさたなはま 3</div> 4 5<div id="message_contents_search_2249" class="message_contents fs14"> 6<span class="search_word">あ</span>かさたなはまやらわあかさたなはたまやら 7</div> 8 9<div id="message_contents_search_2248" class="message_contents fs14"><span class="search_word">あ</span>かさたなはまゆらわあかさた 10</div>
typescript
1for (let search_message_id of message_id_array){ 2 $('#message_contents_search_' + search_message_id).each(function () { 3 var txt = $(this).text(); 4 $(this).html(txt.replace(vue.header.search_box, '<span class="search_word">' + vue.header.search_box + '</span>') 5 ); 6 }); 7 }
特定の文字の背景色を変えるために、特定の文字にだけ<span class="search_word">
を付与したいです。
typescriptの
message_id_array
には2250,2249,2248が入ってます。
vue.header.search_box
には特定の文字(この場合「あ」)が入ってます。
ぼくのやり方だとさい最初の一文字目にしかスタイルがあたらないです。
さらに付与したspanタグには連番のidも付与したいです...
追記
js
1 let i = 0 2 for (let search_message_id of vue.header.search_message_id_array) { 3 $('#message_contents_search_' + search_message_id).each(function () { 4 5 let txt = $(this).text(); 6 $(this).html(txt.replace(new RegExp(vue.header.search_box, "g"), '<span class="search_word" id="sw_' + (i++) + '">' + vue.header.search_box + '</span>')); 7 8 }); 9 }
html
1<div id="message_contents_search_2250" class="message_contents fs14"><span class="search_word" id="sw_0">あ</span>かさたなはまやらわ<span class="search_word" id="sw_0">あ</span>かさたなはま</div>
追記
js
1$('.search_word').each(function (i) { 2 $(this).attr('id', 'sw_' + (i)); 3 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/28 08:38
2018/02/28 08:40
退会済みユーザー
2018/02/28 08:44
退会済みユーザー
2018/02/28 08:52
2018/02/28 09:13 編集
退会済みユーザー
2018/02/28 09:16
2018/02/28 09:24
退会済みユーザー
2018/02/28 09:38
退会済みユーザー
2018/02/28 09:39
退会済みユーザー
2018/02/28 09:52
2018/02/28 12:40 編集