フーノページ

JavaScript : " "で囲まれた部分のCSSを書き換える。

〽️ 技ありreplace。

TOP

""に囲まれたテキストの文字色を変えたいよ！

こんにちは。「ふ」です。

これまでのreplaceシリーズでは文字列を直接マッチさせて置換させてきました。

「「１正規表現パターン」」 var exp = /りんご/g;

が今回は違います。ダブルクオテーション(" ") に囲まれた範囲を、内部の文字列に関係なく一括でreplaceしたいと思います。

どうすれば・・・

作戦会議。

ということは、「" "」に囲まれた文字列

「「４"りんご"」」

と、「" "」を除く、中身のみの文字列

「「４りんご」」

を準備して、

「「４ "りんご"」」「「１---▼　replace　▼---」」 <CSS入りのタグ> + ＆quot;「「３（「"」の文字実体参照）」」 + 「「４りんご」」　+ ＆quot; + </閉じタグ>

最終の処理としては、このようなreplaceを行いたい。
テキストから「" "」に囲まれた文字列、そしてその中身のみを取り出してそれぞれ別の配列に追加していきたいと思います。準備していきましょう。

正規表現パターンの定義。

「ダブルクオテーションで囲まれた任意の文字列」は以下のようなパターンで表現できます。

var quo_regex = /"(.*?)"/g;

「.」任意の文字（改行を除く）、
「*」０回以上の繰り返し、
「？」最短でマッチするもの、
という意味です。「g」は対象の文字列全体をクロールする、という意味ですね。

そしてここで「" "」の中身のパターン「 .*? 」を丸括弧でくくって「グループ化」させておくのが、味噌です。

サンプルとなる文字列を用意しました。見やすいように<h2>で定義しています。

りんご
"りんご"
みかん
"みかん"

ひとまずこの段階でブラウザにプレビューしておきます。

ブラウザ

exec( )method。

ではScriptを書いていきます。まづdivのテキストを取り出しましょう。

var str = document.getElementById("sample").innerHTML;

これはもうお馴染みですね。このinnerHTMLからマッチした部分を順次取り出して行くためにexec()メソッドを使います。
その返り値を出力してみましょう。

console.log(quo_regex.exec(str)); 「「１▶︎ ["「「４"りんご"」」","「「４りんご」」",]」」

配列が返ってきます。１つ目の要素はマッチした文字列、２つ目の要素には正規表現パターンのうちグループ化した部分が入っています。

var quo_regex = /"(.*?)"/g;

この( .*? )の部分ですね。

!!!

冒頭にて述べた、

「" "」に囲まれた文字列
　
「" "」を除く、中身のみの文字列　

の取得に成功しました。
正規表現パターンの定義において、「グループ化させておくのが味噌」と言ったのはこのためです ♩

while文で取り出し、配列に格納。

while文を使ってマッチする文字列を順に取り出して行くのですが、配列を３つ準備しておきます。

・exec()メソッドの返り値を格納する配列myArray

・配列の１つ目の要素をぶち込むbutiArray1

・配列の２つ目の要素をぶち込むbutiArray2

◼︎なお先ほどのconsole.logメソッドによってexec( )メソッドのlastIndexが更新されてしまっているので、リセットさせるために消しておきましょう。

「「１コメントアウトさせて実行されないようにしておく」」「「３//console.log(quo_regex.exec(str));」」 var myArray; var butiArray1 = []; var butiArray2 = [];

扨（さて）while文。replaceに使う部品を準備していきましょう。

「設定した正規表現パターンがマッチするまでの間」という条件文を使います。

while(myArray = quo_regex.exec(str)) { }

myArrayの中身をみてみましょう。

while(myArray = quo_regex.exec(str)) { console.log(myArray); } 「「１▶︎ ["「「４"りんご"」」", "「「４りんご」」"] ▶︎ ["「「４"みかん"」」","「「４みかん」」"]」」

while文の条件下で処理が２回実行されて、２つの配列が出力されました。
配列の１つ目の要素はmatchした文字列（クオテーションを含んだもの）、２つ目は正規表現パターン内でグループ化された部分（クオテーションの内部の文字列）が入っています。

各配列の１つ目の要素をbutiArray1にpush、２つ目の要素をbutiArray2にpushし、配列を生成します。

while(myArray = quo_regex.exec(str)) { butiArray1.push(myArray[0]); butiArray2.push(myArray[1]); }

ここでwhile文を閉じます。butiArray1とbutiArray2を出力してみましょう。

console.log(butiArray1); 「「１▶︎ ["「「４"りんご"」」","「「４"みかん"」」"]」」 console.log(butiArray2); 「「１▶︎ ["「「４りんご」」","「「４みかん」」"]

「" "」を含む文字列の配列と、「" "」の中身だけを集めた配列が出来上がりました。

for文でreplace。

出来上がった２つの配列を使って、replaceさせていきましょう。
butiArray1の要素を、butiArray2の要素をCSS入りのタグと＆quot;で囲んだものに置き換えます。

配列の要素の数だけreplace処理を繰り返したいので、for文の条件を下のように設定します。

for(i = 0; i < butiArray1.length; i++)

内部にreplace処理を書き込みます。

for (i = 0; i < butiArray1.length; i++) { str = str.replace(butiArray1[i],'"' + butiArray2[i] + '"'); }

元のdiv内のテキストを置換したstrに置き換えます。

document.getElementById("sample").innerHTML = str;

扨、やるだけのことはやりました。それでは・・

Build。

成功です！

while文とfor文を駆使してなんとかできました、お疲れ様です。

今回は「" "」に囲まれた部分をreplaceさせてみましたが、

この方法を使えば、（）や『』などの"囲み系"ならなんでもreplaceできるやん！

と思われた方、まだ解決すべき問題点が残されています。

当ページで紹介した手順の応用について、またexec( )メソッドの解説については、長くなってしまうのでまた別のページにて、紹介させていただきますね。