jQuery(Javascript)で特定の文字の「背景色」を変更させる方法について。

###前提・実現したいこと
jQuery(Javascript)で特定の文字の「背景色」を変更させることが出来ず、困っております；
下記ソースコードにある「ざーざー」という文字を含む行の背景色を赤色に変えたいのです。

つまり、2行目と6行目の背景色を白（デフォルト）から赤色に変えたいです。
もし、可能であるようならば方法を教えていただけないでしょうか？
実装がムリなようであれば、不可能と一言教えて頂ければあきらめます。

あいうえお今日はいい天気ですね。ぴかっぴか

かきくけこ今日は雨ですね。ざーざー

さしすせそ今日はんーまぁまぁの天気かな。ぴかっ

たちつてと今日もふつう。ハレハレ

なにぬねの今日は台風だね。びゅーびゅー

はひふへほ今日もまた雨か。ざーざー

###発生している問題・エラーメッセージ

###ソースコード

<div class="aiueo">

あいうえお 今日はいい天気ですね。ぴかっぴか <br>
<hr>
かきくけこ 今日は雨ですね。ざーざー <br>
<hr>
さしすせそ 今日はんーまぁまぁの天気かな。ぴかっ <br>
<hr>
たちつてと 今日もふつう。ハレハレ <br>
<hr>
なにぬねの 今日は台風だね。びゅーびゅー <br>
<hr>
はひふへほ 今日もまた雨か。ざーざー <br>
<hr>

</div>

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

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

回答2件

ベストアンサー

class="aiueo"が複数あっても動作します。

javascript
1/*jshint browser: true, jquery: true*/
2
3$(function() {
4    var aiueo = $('.aiueo'); // 2回使うので変数に入れて処理削減
5    var aiueoHtmlArray, aiueoThis;
6    
7    aiueo.each(function() { // class="aiueo"が複数あるかもしれないのですべてに対して処理
8        
9        aiueoThis = $(this); // 3回使うので変数に入れて処理削減(thisはここではn個目のclass="aiueo"を表します)
10        aiueoHtmlArray = aiueoThis.html().split('<hr>'); // thisのHTMLを取得し、hr要素で分割して配列に代入
11        aiueoThis.empty(); // thisの内容を削除
12        $(aiueoHtmlArray).each(function(index) { // aiueoHtmlArrayの各要素に対して処理
13            aiueoThis.append(function() { // thisの最後に追加
14                if(aiueoHtmlArray[index].indexOf('ざーざー') != -1) { // 「ざーざー」という文字列が含まれたら
15                    return '<span style="background-color: red;">' + aiueoHtmlArray[index] + '</span><hr>';
16                } else { // 「ざーざー」という文字列が含まれていなかったら
17                    return aiueoHtmlArray[index] + '<hr>';
18                }
19            });
20        });
21        
22    });
23});

(10/31 07:52 一部修正しました)

投稿2015/10/30 11:22

編集2015/10/30 22:52

prince_0203

総合スコア26

html
1<div class="aiueo">
2
3あいうえお 今日はいい天気ですね。ぴかっぴか <br>
4<hr>
5かきくけこ 今日は雨ですね。ざーざー <br>
6<hr>
7さしすせそ 今日はんーまぁまぁの天気かな。ぴかっ <br>
8<hr>
9たちつてと 今日もふつう。ハレハレ <br>
10<hr>
11なにぬねの 今日は台風だね。びゅーびゅー <br>
12<hr>
13はひふへほ 今日もまた雨か。ざーざー <br>
14<hr>
15
16</div>

じゃなくて

html
1<div class="aiueo">
2
3<span>あいうえお 今日はいい天気ですね。ぴかっぴか </span><br>
4<hr>
5<span>かきくけこ 今日は雨ですね。ざーざー </span><br>
6<hr>
7<span>さしすせそ 今日はんーまぁまぁの天気かな。ぴかっ </span><br>
8<hr>
9<span>たちつてと 今日もふつう。ハレハレ </span><br>
10<hr>
11<span>なにぬねの 今日は台風だね。びゅーびゅー </span><br>
12<hr>
13<span>はひふへほ 今日もまた雨か。ざーざー </span><br>
14<hr>
15
16</div>