JavaScript : 正規表現で一括replace。
〽️ 少しだけ正規表現。
最初のマッチしか対応してくれない！
こんにちは。「ふ」です。
前回replaceメソッドを使ってHTMLを書き換えることに成功しました。今度はこんなコードを試していきます▼。
ブラウザではこんな感じ▼。
前回のreplaceメソッドを使って（思い出してね）、「りんご」を赤色のテキストにしてみたいと思います。
var str = document.getElementById("sample").innerHTML;
str = str.replace(
'りんご','りんご'
);
document.getElementById("sample").innerHTML = str;
ん・・
１つ目の「りんご」しかreplaceされていない！
そうです。
replaceの第1引数に文字列を指定すると、１つ目の「りんご」にマッチするした段階で実行が終了してしまいます。したがって2つ目の「りんご」にreplaceは適用されません。
一括ですべての「りんご」に対応させるにはどうすればよいか。「正規表現」というものを使ってみましょう。
正規表現を使ってみよう。
正規表現とは、文字列のパターンを記号や文字で表し、指定された範囲の中からそれを検出するやりかたです。
変数として宣言・代入してみると以下のように。
var regexp = /こんにちは/
このように文字列をスラッシュ(/)で囲むことによって表現します。
replaceメソッドに取り入れてみましょう。
var str = “あいうえお”
この「あいうえお」を部分的にカタカナに置換します。
まずは従来の、第1引数に文字列を入力する方法で。
str = str.replace(“あい”,”アイ”);
console.log(str);
「「１▶︎アイうえお」」
今度は第1引数に正規表現を使ってみます。
str = str.replace(/あい/,”アイ”);
console.log(str);
「「１▶︎アイうえお」」
いずれも同じ結果となります。
しかし！
このやり方ではまだ、1番目にマッチしたパターンしかreplaceさせることができません。
じゃあどうせえっちゅうねん。
・・・・・・・・
検索オプションを使えばよし。
JavaScriptの正規表現では検索条件を指定するオプションをつけることができます。
オプションのうち「g」をスラッシュの後に添えると、対象のテキストの中から該当するパターン全てにマッチします。
var regexp1 = /りんご/
「「１//１つ目の「りんご」にだけマッチする」」
var regexp2 = /りんご/g
「「１//検索オプションの「g」をスラッシュ「/」の後ろに添えることで、strの中に含まれるすべての「りんご」にマッチする」」
「g」は「global」の「g」を意味します。
replaceさせてみましょう。
「「１◼︎ 検索オプションなし」」
var str1 = "りんご、りんご、みかん、みかん";
str1 = str1.replace(regexp1,青リンゴ);
console.log(str1);
「「１▶︎"青リンゴ、りんご、みかん、みかん"」」
「「３//１つ目の「りんご」だけにマッチして置換される」」
「「１◼︎ 検索オプション付」」
var str2 = “りんご、りんご、みかん、みかん”;
str2 = str2.replace(regexp2,"青リンゴ");
console.log(str)
「「１▶︎"青リンゴ、青リンゴ、みかん、みかん"」」
「「３//すべての「りんご」が「青リンゴ」に置換される」」
これならいけそうだ。
これは・・もはや。
扨、冒頭のHTMLコードを"検索オプション付きの正規表現"を使って置換してみましょう。あ、ついでに「みかん」の色も変えてみます。
「"」と「'」の使い分けに気をつけてくださいね。
var str = document.getElementById("sample").innerHTML;
「「１//「りんご」の文字色をredにする」」
str = str.replace(/りんご/g,'りんご');
「「１//「みかん」の文字色をorangeにする」」
str = str.replace(/みかん/g,'みかん');
document.getElementById("sample").innerHTML = str;
扨（さて）プレビューするよ。
おお、うまくいきましたね。
ではJavaScriptはこのままで、< div id = sample > 内のテキストを書きなぐってみます。
りんごみかんぶどうぶどうばななみかんももはっさくみかん あおりんご りんごココナッツはくさいもんきーばななみかん
〜それは丁度、私が畑仕事から帰るときのことだった。
1日の疲れを癒すため、りんごをかじりながらふと東の空を見上げると、何かオレンジ色に光る光るものがある。
・・みかんだった。
指定した < div > 内にテキストを流し込むと、自動的にCSSが実行されてブラウザに表示される。
これは・・
最早・・
自分好みのシンタックスハイライト。
【シンタックスハイライト】
テキストを部分的に装飾（色やフォントなど）して、可読性を高く高くする機能。
例えばこんな感じです▼。
一般的なcodeエディタにはシンタックスハイライト機能が実装されていて、入力したcodeがこのように綺麗に表示されます。
replaceメソッドと正規表現を使えば、ブラウザ上にかっこよくcodeを埋め込むことができそうですね！
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧
