みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【JavaScript】正規表現で文字を自在に指定する(RegExpオブジェクト)③

JavaScript

マッチング情報を取得する

RegExpオブジェクトでは
execメソッドで最後にマッチした文字位置をはじめ
直近のマッチ情報を参照するためにいくつかのプロパティを公開している

  • lastIndex
    • 検索を開始する位置
  • leftContext
    • $`
    • 最後のマッチ文字列の前の文字列
  • rightContext
    • $'
    • 最後のマッチ文字列の後に続く文字列
  • lastMatch
    • $&
    • 最後にマッチした文字列(Operaは未対応)
  • lastParen
    • &+
    • 最後にマッチした()で囲まれたグループの文字列(Operaは未対応)
  • lastParen
    • パターンマッチした文字列を順に格納(最大9個)

全て静的プロパティ

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str = 'このブログはhttp://micomura.hatenablog.jp/です。';
str += 'ちなみにTwitterはHTTPS://twitter.com/micomuraだったりします。';
while((result = p.exec(str)) != null){
  document.writeln(p.lastIndex + ':' + result[0]);
  document.writeln('leftContext:' + RegExp.leftContext);
  document.writeln('rightContext:' + RegExp.rightContext);
  document.writeln('lastMatch:' + RegExp.lastMatch);
  document.writeln('lastParen:' + RegExp.lastParen);
  document.writeln('$1:' + RegExp.$1);
  document.writeln('$2:' + RegExp.$2);
  document.writeln('$3:' + RegExp.$3);
  document.writeln('<hr />');
}

36:http://micomura.hatenablog.jp/
leftContext:このブログは
rightContext:です。ちなみにTwitterはHTTPS://twitter.com/micomuraだったりします。
lastMatch:http://micomura.hatenablog.jp/
lastParen:/
$1:
$2:hatenablog.
$3:/
－－－－－－－－－－－－－－－－－－－
79:HTTPS://twitter.com/micomura
leftContext:このブログはhttp://micomura.hatenablog.jp/です。ちなみにTwitterは
rightContext:だったりします。
lastMatch:HTTPS://twitter.com/micomura
lastParen:/micomura
$1:S
$2:twitter.
$3:/micomura

うむうむ

あとこんな風に書き換えられるそうな

RegExp.leftContext
RegExp['$`']

ほっほー

マッチングの成否を検証する

正規表現で「ただマッチしているかどうかを知りたい」場合にも
String.match/RegExp.execメソッドで
戻り値がnullであるかどうかを確認すれば
マッチングの成否を判定することが可能だが
testメソッドを利用すると
もっと簡単に検証することができる
testメソッドは与えられた文字列を検索し
その結果を真偽値(true/false)で返す

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str1 = 'このブログはhttp://micomura.hatenablog.jp/です。';
var str2 = 'ちなみにTwitterもやってたりします。';
document.writeln(p.test(str1));  //true
document.writeln(p.test(str2));  //false

他にも指定された正規表現で
最初にマッチした文字位置を返すString.searchメソッドを
利用することもできる
searchメソッドはマッチ文字が存在しない場合に
戻り値として-1を返す

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str1 = 'このブログはhttp://micomura.hatenablog.jp/です。;'
var str2 = 'ちなみにTwitterもやってたりします。';
document.writeln(str1.search(p));  //8
document.writeln(str1.search(p));  //-1

testメソッドわかりやすい結婚したい

正規表現で文字列を置き換える

String.replaceメソッドを利用すれば
正規表現でマッチした文字列を置換することができる
以下構文

置き換え対象の文字列.replace(正規表現オブジェクト, 置換後の文字列)

具体例

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str = 'このブログはhttp://micomura.hatenablog.jp/です。';
document.writeln(str.replace(p, '<a href="$1">$1</a>'));  //

このブログは「http://micomura.hatenablog.jp/」です。

なるほどねー
置換後の文字列には「$1..$9」といった
特殊変数を埋め込める点に注意
これらはサブマッチ文字列を保存するための変数で
この例であれば以下のような値が
それぞれ$1～$4に格納されることになる

この例では正規表現全体を丸カッコで囲んでいる
これは特殊変数$1に
マッチング文字列全体をセットするための便宜的な措置である

あああーなるほど

これ丸カッコに気付いてなくて
特殊変数$1をdocument.writelnしても何も表示されなくて
(特殊変数$1、繰り上がった場合undefinedで運悪く空だから)
しばらく四苦八苦していた‥気を付けます‥

正規表現で文字列を分割する

正規表現で文字列を分割するにはString.splitメソッドを使用する

var p = /[\/\.\-]/gi;
document.writeln('2012/02/01'.split(p));  //2012,02,01
document.writeln('2012.02.01'.split(p));  //2012,02,01
document.writeln('2012-02-01'.split(p));  //2012,02,01

上記は日付の文字を「/」「.」「-」で区切って
年月日に分解するコード
splitメソッドは戻り値として分割した結果を配列として返す





長かった正規表現も終わり！大丈夫か私