
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
JavaScript
2017.11.09
String オブジェクトのreplace メソッドを使用して文字列の置換を行う場合、指定した文字列を新たな文字列に置き換える以外にも、色々と便利な置換方法があります。
今回は、replace メソッド内でコールバック関数を使用する方法などを紹介します。
1.置換文字列を置換パターンに指定
2.置換文字列を複数指定
3.コールバック関数で指定
String オブジェクトのreplace メソッドを使用して文字列の置換を行う場合に、置換後の文字列として置換パターンを指定することができます。
置換パターンには次のようなものがあります。
置換
パターン内容 $$ 「 $ 」を挿入 $& 置換対象として指定した文字列を挿入 $` 置換対象として指定した文字列の直前の文字列部分を挿入 $’ 置換対象として指定した文字列の直後の文字列部分を挿入 $n
$nnn か nn には 10 進表現の数が入る
第一引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたサブマッチの文字列を挿入
次のサンプルは、指定した文字列を<b>と</b>で囲む置換処理をしています。
var str = "青は藍より出でて藍より青し"; var str2 = str.replace(/青|藍/g, "<b>$&</b>");
正規表現の後ろに記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現リテラルのパターンにマッチする全ての文字列を返します。
(正規表現の記述については、正規表現をご参照下さい。)
正規表現の中に記述している「 | 」は 左右の文字列のいずれかという意味のメタ文字です。
(メタ文字については、メタ文字を使用した置換をご参照下さい。)
変数str2を出力すると、次のように表示されます。
文字列の中の「 青 」と「 藍 」が b タグで囲まれました。
正規表現で、置換対象をカッコ「 ( ) 」で囲むことによって、複数の置換文字列を指定することができます。
置換処理を複数指定する場合は、次のように記述します。
var str = "青は藍より出でて"; var str2 = str.replace(/(青)は(藍)/g, "<b>$1</b>は<u>$2</u>);
正規表現の後ろに記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現リテラルのパターンにマッチする全ての文字列を返します。
(正規表現の記述については、正規表現をご参照下さい。)
「 $1 」や「 $2 」は、それぞれカッコ「 ( ) 」で囲まれた文字列を示しており、置換後、$1 部分には先頭のカッコ内文字列が入り、$2 部分には先頭から2番目のカッコ内文字列が入ります。
$3、$4、…と、いくらでも指定できます。
変数str2を出力すると、次のように表示されます。
テキストの中の「 青 」が b タグで、「 藍 」が u タグで囲まれました。
置換後文字列の代わりに、replace メソッド内の引数にコールバック関数を指定することもできます。
コールバック関数を指定すると、より複雑な処理を行うことができます。
コールバック関数を指定する場合は、次のように記述します。
var str = "'ab','c',d,'ef'"; var str2 = str.replace(/'.*?'/g, function(){ return arguments[0].toUpperCase(); });
「 arguments[0] 」は、返す値のことで、「 toUpperCase() 」は、小文字を大文字にするString オブジェクトのメソッドですので、このコールバック関数によって、置換対象文字列の小文字が大文字に置き替えられます。
「 /’.*?’/g 」の記述については、メタ文字を使用したパターンをご参照下さい。
変数str2を出力すると、次のように表示されます。
シングルコーテーション( ‘ )で囲まれた文字列の小文字が大文字に置換されました。
先ほどのサンプルで、コールバック関数の返り値「 arguments[0] 」が出てきましたが、この arguments を利用して、コールバック関数内で条件分岐を行うことができます。
arguments
文字列 .replace( /'(.*?)’|<(.*?)>/g , コールバック関数 );
上記のような指定をした場合、arguments の中身は以下の通りです。
arguments[0] 「 ‘ ‘ 」または「 < > 」で囲まれた文字列 arguments[1] 1番目のカッコ「 ( ) 」内に該当する文字列 arguments[2] 2番目のカッコ「 ( ) 」内に該当する文字列 arguments[arguments.length-2] 置換対象文字列の先頭の位置 arguments[arguments.length-1] 検索対象の文字列
次のサンプルは、コールバック関数内で条件分岐処理を行っています。
var str = "'', ,f"; var str2 = str.replace(/'(.*?)'|<(.*?)>/g, function(){ if(!arguments[1] && arguments[2]) { return "[" + arguments[2] + "]"; } else { return arguments[0] } });
「 /'(.*?)’|<(.*?)>/g 」は、「シングルコーテーション( ‘ ‘ )内の文字列 または 山カッコ( < > )内の文字列全て」を意味しています。
「 arguments[1] 」は、1番目のカッコ内に該当する文字列「 <abc> 」を、「 arguments[2] 」は、2番目のカッコ内に該当する文字列「 de 」を それぞれ示しているため、「 !arguments[1] && arguments[2] 」の条件を満たすのは、「 <de> 」のみとなり、文字列「 [de] 」に置換されます。
「 ‘<abc>’ 」は、「 arguments[0] 」が示す「 ‘<abc>’ 」に置換されるため、結果的には変更はありません。
「 f 」は、置換対象に該当しません。
したがって、変数str2を出力すると、次のように表示されます。
因みに、arguments[0]?arguments[4]の中身を出力すると、次のようになります。
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.