[JavaScript] 正規表現に入門する
こんにちは、@yoheiMuneです。
以前簡単な正規表現入門資料を作ったのですが、ブログにも書いておこうと思います。
例えば、HTMLドキュメントの中に以下のようなイメージタグがあった場合に、
もちろん正規表現を使わない方法でも同様のことを実現できますが、 正規表現を使うとより複雑なことがより簡単に行えるようになります（正規表現を知らない人から見たら、すごく高度なことをやってるように見えます）。
プログラミングを行うなら、「ぜひ正規表現を使って文字列の処理が出来るようになるべき！」ってオススメしたいすんごくて面白い技術です。
フロントエンドだと、例えば入力チェックとかできます。
例えば、文字列中に「monster」という単語が含まれているかの判定は、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
例えば、以下のパスから、「mst_xxxx_yyyy」という部分を取り出したいとします。
簡単な例では、以下の変数で「mst_0015_kraken」を「mst_0019_harpy」に変更したい場合、
ここまで使えれば、正規表現をいい感じに使っていることになるかもです。
また各プログラミング言語で、正規表現のフォーマットは同じなので、一度覚えると他の言語でもつぶてが効きます。
ぜひ今後、少しずつでいいので使ってみてくださいー！
最後までご覧頂きましてありがとうございました。
以前簡単な正規表現入門資料を作ったのですが、ブログにも書いておこうと思います。
正規表現って何？
ざっくり言うと、正規表現は「文字列を扱う為の技術」と言えると思います。 正規表現を使って、ある特定の文字列を検索したり、置換したり、抜き出したりすることが出来ます。例えば、HTMLドキュメントの中に以下のようなイメージタグがあった場合に、
<img src="foooooooo.png"alt="画像だよ"/>img要素がHTML文章内があるかを検索することも出来るし、「foooooooo.png」を「huuuuuuuuu.png」に置換することも出来るし、「foooooooo.png」を取り出すことも出来ます。
もちろん正規表現を使わない方法でも同様のことを実現できますが、 正規表現を使うとより複雑なことがより簡単に行えるようになります（正規表現を知らない人から見たら、すごく高度なことをやってるように見えます）。
プログラミングを行うなら、「ぜひ正規表現を使って文字列の処理が出来るようになるべき！」ってオススメしたいすんごくて面白い技術です。
正規表現を身につけると何が良いの？
正規表現を使うと、文字列操作が短いコードで楽に行えます。 正規表現は様々なプログラミング言語で正規表現はサポートされており、 一度覚えると文字列を扱う処理が楽になります。フロントエンドだと、例えば入力チェックとかできます。
例）EMailアドレスのチェック
aaaaa@bbbbというフォーマットか否かを判定出来ます。 （ライブラリ使えば簡単ですが、その実装方法を学ぶと良いかもしれません）。正規表現を学ぶ（検索する）
今回は、フロントエンドのお友達のJavascriptを用いて、機能を正規表現を説明したいと思います。 JavaScriptで正規表現を使うには、以下6種類のいづれかを使います。- RegExp#test
- RegExp#exec
- String#match
- String#replace
- String#search
- String#split
例えば、文字列中に「monster」という単語が含まれているかの判定は、
var str ='/var/v1/skin/monster/mst_0015_kraken/stand/type_p/stand.png';
if(str.indexOf('monster') !== -1) {
// monsterという単語が含まれる
}
とも出来ますが、以下のようにも出来ます。
if(str.match(/monster/)) {
// monsterという単語が含まれる
}
または、こんな感じも出来ます。
if(/monster/.test(str)) {
// monsterという単語が含まれる
}
また、indexOfでやるには複雑なマッチングとして、「monster/（なんらかの文字列）/type_p/（何らかの文字列）」といった部分一致も簡単にテスト出来ます。
if(str.match(/monster.*type_p/) {
// マッチした
}
indexOfでやる場合には、以下のように面倒な感じです。
if((str.indexOf('monster') !== -1) && (str.indexOf('type_p') !== -1) {
// マッチした
}
上記で使った「.」とか「*」は正規表現では特別な意味を持つ文字列です。
具体的な意味やその他の特殊文字は、以下のMDNを見てみてください。https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
正規表現（値を取り出す）
正規表現を行うと、いい感じに値を取り出すことが出来ます。例えば、以下のパスから、「mst_xxxx_yyyy」という部分を取り出したいとします。
var str ='/var/v1/skin/monster/mst_0015_kraken/stand/type_p/stand.png';その場合には、以下のように行うと正規表現を使わない場合には、こんな感じです。
var key = str.replace('/var/v1/skin/monster/','').replace('/stand/type_p/stand.png','');
正規表現を使う場合には、こんな感じです。
var key = str.match(/\/(mst_\d{4}_.*?)\//)[1];
正規表現使わないときに比べて、ちょっとスッキリですね。
また、「mst_xxxx_yyyy」の前後のパスに依存しない検索なので、変更に強いプログラムになります。正規表現（置換する）
最後に置換を行う方法です。簡単な例では、以下の変数で「mst_0015_kraken」を「mst_0019_harpy」に変更したい場合、
var str ='/var/v1/skin/monster/mst_0015_kraken/stand/type_p/stand.png';
var newStr = str.replace('mst_0015_kraken','mst_0019_harpy');
って感じに簡単に出来ますね。
replaceの第１引数には正規表現も利用出来るので、以下でも出来ます。
var newStr = str.replace(/mst_0015_kraken/,'mst_0019_harpy');また、正規表現を使う場合には、文字列内の該当箇所全部を変更することも出来ます。 例えば、上記パスの「stand」を「jump」に変更する場合には、以下のようにします。
var jumpStr = str.replace(/stand/g,'jump');「g」オプションは全部置換する的な意味で、すごく便利なオプションです。 最後に、クラーケン以外のパスが来ても、「mst_0019_harpy」のパスに変更したい場合はこんな感じで書くことができます。
var newStr = str.replace(/^(.*)\/mst_\d{4}_.?\/(.)$/,'$1/mst_0019_harpy/$2');
ここで使っている「(」「)」はキャプチャ機能で、replaceメソッドの第2引数内などで、マッチした文字列を参照することが出来ます。ここまで使えれば、正規表現をいい感じに使っていることになるかもです。
最後に
正規表現って難しいと感じましたでしょーか？ 自分は最初見たとき、なんじゃこりゃという感じでチンプンカンプンでした。 が、必要に迫られて使い始めて、だんだんと使えるようになると、便利さが良いなぁと思いました。また各プログラミング言語で、正規表現のフォーマットは同じなので、一度覚えると他の言語でもつぶてが効きます。
ぜひ今後、少しずつでいいので使ってみてくださいー！
最後までご覧頂きましてありがとうございました。
