2022年04月23日

javascript:match()

このメソッドの説明

match() はJavaScriptのメソッドです。

文字列を[正規表現]または[文字列]でサーチしてマッチしたデータを[配列]で取り出します。

また判定にも利用できます。

 


メソッド

String.match( SearchValue )

 


パラメータ

SearchValue(文字列 | 正規表現)(必須)

サーチする条件を[文字列]または[正規表現]で指定します。

 


返り値

見つかった場合:データを[配列]で返します。

見つからない場合:nullを返します。

 


利用例

①文字列に一致する文字列があるかを判定する(文字列指定)

var input_data= 'abc.item.abc';   
input_data.match('item') ? console.log( 'yes' ) : console.log( 'no' )

■2行目:三項演算子のif文でコンソールに結果を表示しています。

■結果は「yes」が表示されます。

 

②文字列に一致する文字列があるかを判定する(正規表現指定)

var input_data= 'abc.btem.abc' ;   
input_data.match( /item/ ) ? console.log( 'yes' ) :console.log( 'no' )

■2行目:三項演算子のif文でコンソールに結果を表示しています。

■結果は「no」が表示されます。

 

③ページを判定する

下記はURLに「javascript」があるページにだけ処理を実行する方法です。

$(function(){
    if(!location.href.match('javascript')){return;}
    console.log( 'javascriptページ処理開始' );
});

上記を実行すると

javascriptページ:javascriptページ処理開始 が表示されます。

それ以外のページ:何も処理しません。

■$(function(){処理});は、ドキュメントがデバイスに読み込まれた後に実行される関数です。

location.href は、現在のページのURLを取得します。

■上記のURLに「javascript」の文字があるか否かを判断しています。

 

④電話番号は正しいかを判定する

var tel_number = '03-123-1234';
var tel_check = tel_number.match( /^0\d{1,2}-\d{3,4}-\d{4}$/);
tel_check ? console.log('正しい電話番号です'):console.log('電話番号は間違っています');

■上記を実行すると正しい電話番号ですが返されます。

■電話番号は、先頭が0(1桁又は2桁の数字)-(3桁又は4桁の数字)-(4桁の数字)が末尾で判定しています。

 

⑤電話番号を取り出す

var input_data = '電話番号:080-992-1234,電話番号:03-1234-1234,電話番号:050-912-1234';   
var tel_data   = input_data.match( /^0\d{1,2}-\d{3,4}-\d{4}$/g  );
console.log(tel_data);

■上記の実行結果は下記が表示されます。

(3) ["080-992-1234", "03-1234-1234", "050-912-1234"]

■正規表現の/ /gは、繰り返しを表します。これを指定しないと1個見つけた段階で終了します。

 

⑥数値を取り出す

var rgb_color = 'rgb(0,2,255)';
var color_code = rgb_color.match( /[\d]+/g );
console.log(color_code);

■上記の実行結果は(3) ["0", "2", "255"]が表示されます。

■正規表現の []+ は、数値が複数個(255等)があっても対象にする指定です。

■正規表現の / /g は、繰り返しを表します。gを指定しないと1個見つけた段階で終了します。

 


関連情報

・文字列を正規表現で操作する他のメソッドは正規表現メソッドを参照してください。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()