[Javascript] 正規表現を使って複数の文字列置換を一発でやる方法

2018年5月6日

Javascript テクノロジー プログラミング

昼と夜はどっちが好きかって? そりゃあ、昼に決まってるでしょ! だって、夜は太陽が無いんだからね。 と言ってしまうぐらい、僕は明るい日差しが大好きなプログラマーなのですが、プログラムを仕事にしている人って夜型が多いですよね? 集中できるのは、わかるんですが、太陽と共に起きて寝るという行動をしていると、人としての幸せを感じやすくなる気がするんですよね。 あ、でも、雨の日は憂鬱になっちゃうかもしれませんが・・・ 休みの日にこんな事を考えながら、プログラムを書いていたら、ちょっとつまずいた箇所があったのでブログで共有します。

javascriptの文字列置換について

javascriptで文字列置換処理をする場合は、replaceで行うか、splitしてjoinするやり方をやると、まあまあ高速に処理ができますが、正規表現が入って、且つ複数の文字列がある場合、また、その置換対象が、正規表現の結果に基づくというような条件の場合、少し複雑なのですが、今回行なってみました。 もう少し具体的な説明をすると、 任意で登録できる文字列に対して、置き換え文字として、%...%という形式が書き込めるデータで、%...%の"..."部分は、メモリに蓄積されている変数に入れ替えをするという内容です。 ページ内で「名前」を入力するフォームがある場合、その名前のinputタグのname属性をkeyとして、変数を作成します。 // 下記のようなタグの場合 <input type="text" name="userName"> // 下記のような変数が作成されます。 var data = { userName : form["userName"] }; // この"userName"値を呼び出す方法として %userName% という文字列を置き換えるという事。 わかっていただけましたが? え?わからない? そんな人はこの先の記事を読んではイケない!!!!

サンプル

簡単に説明すると、「replace」を使って、正規表現の検索結果を元に、変数があるかどうかの判定を行い、存在すれば、対象文字列に置換し、そうでなければ、ブランクを返すという内容にします。 コードは以下の通りです。 var data = {"aaa":"私","bbb":"名前","ccc":"ボブ","ddd":"キャサリン"}; var str = "%aaa%の%bbb%は%ddd%です。%bbb%はまだ%eee%。"; str2 = str.replace(/%(.+?)%/g , function(s){ var a = s.replace(/%/g,""); if(typeof data[a] !== "undefined"){ return data[a]; } else{ return ""; } }); console.log(str2); > 私の名前はキャサリンです。名前はまだ。

ちょこっと解説

replaceのコールバック関数を使っているだけなので、この処理があまり明るくない人は以下の解説を読んで理解してくださいませ。 まず、replaceのコールバック関数は、正規表現の結果に応じて、それぞれ呼び出されます。 該当箇所が2箇所あれば、2回別々に呼び出されるので、コールバックの受け渡し値"s"には、それぞれの"%...%"という値が順番に入ってきます。 そして、さらに内部でreplaceを行なっていうrのは、"%"という文字列が邪魔なので、それを消し去っています。 ※ここでの注意ポイントとしては、この%...%という値の中の文字列に"%"を使ってはいけないという事です。かならず、最初と最後の決まり記号なのです。まああまり気にしなくても問題はなさそうですが・・・ そして、変数の値"a"を取り出したら、それをtypeofでdataオブジェクト内のkeyに該当があるかどうかを確認しましょう。 この場合、判別しやすいのでdataオブジェクトを使っていますが、グローバル変数の場合は、window[a]という判定でもイケます。 そして、無事に値がある場合とない場合の処理を分けてreturnしてやれば、結果が伴ってきます。

便利なコールバック関数

結構特殊な処理を行いがちなjavscript言語ですが、こうしたコールバック関数がいたるところに散りばめられているので、他の関数などでも、「こんなことできるかな・・・」と考えたことは大概できる仕様になっています。 個人的には、そうしたあまり誰もやらない裏技などを探したり、考えたり、人から教えてもらうことは非常に大好物なので、お困りのことや、新たな裏技の発見などあれば、教えてくださいませ。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。