JavaScript、関数処理でreplace。

一定の規則にしたがってreplace。

こんにちは、「ふ」です。
JavaScriptのreplaceメソッド、フツーの使い方であれば、

let str1 = "かけうどん、天ぷらうどん"; str1 = str1.replace(/うどん/g,"そば"); console.log(str1); 「「３　>> かけそば、天ぷらそば」」

〜とするかと思います。
ここで変換後の文字列を直接記述した場合、replace先の文字列は一意のものとなります。 「うどん」がすべて「そば」になるだけです。

もっと用途を広げたい。

単純に文字列を１つの具体的な別の文字列に変換するのではなく、関数を使うことで「ある法則」にしたがった変換を行いたい。
〜例えば「小文字表記を大文字表記にする」という関数を使って、

"うどんセットa、うどんセットb"       ⬇︎ "うどんセット「「１A」」、うどんセット「「１B」」"

というように、抽出した文字列を関数の返り値に変換できれば。
replaceメソッドの用途がグンと広がります ♪

今回はreplaceメソッドの引数に関数の返り値を反映させることで、「法則にしたがった文字列の変換」を実装する方法を紹介します。

引数に関数を記述。

置換先に関数処理を加える。
方法は単純です。replaceメソッドの第２引数に直接関数を記述することです。

文字列.replace(バターン,function(value) ｛ bb〜処理〜 ｝);

第１引数には取り出したものが。

replaceメソッドに含めた関数の第１引数には、パターンにマッチした文字列そのものが入ります。
引数名はユニークなものであればなんでも構いません。

"100円、150円"

⬆︎の値段を表す文字列。価格を１割引のものに置換してみましょう。
正規表現による連続した数字のパターンは、「/[0-9]｛1, ｝/g 」となります。

let str2 = "100円、150円"; str2 = str2.replace(/[0-9]｛1,｝/g,function(「「５value」」) ｛ bbconsole.log(「「５value」」);「「１ ..①」」 bb「「３▶︎ 100」」 bb「「３▶︎ 150」」 bbreturn Number(「「５value」」)*0.9;「「１ ..②」」 bb｝); console.log(str2);「「１ ..③」」 「「３▶︎ 90円、135円」」

① 引数valueを出力すると「100」「150」となり、パターンにマッチした文字列が「value」に渡されていることがわかります。

② 最終的な返り値を指定しています。「return」の値を記述しないと、文字列は「undefined」に置換されてしまうので忘れずに。

③ replace処理後に「str2」を出力すると、それぞれの値段が１割引に置換されました。

アロー関数にするとスマート。

アロー関数を使うと、もっとスマートに記述することができます。

str2 = str2.replace(/[0-9]｛1,｝/g,(「「５value」」 => Number(「「５value」」)*0.9;)

簡単な処理内容であれば、このほうがコードも見易いですね。

JavaScriptの矢印「=>」、
〜これはアロー関数というものです。

使い方とメリットについて解説。

JavaScriptのアロー関数については、こちら⬆︎の記事で詳しく紹介しています。

外部の関数を呼び出す。

replaceメソッドの引数には、外部で定義した関数を参照させることもできます。

let str3 = "100円、150円"; 「「３//外部で関数を定義」」 function 「「１discount」」(value) { return Number(value)*0.9; } 「「３//第２引数で呼び出す」」 str3 = str3.replace(/[0-9]｛1,｝/g,「「１discount」」); console.log(str3); 「「３▶︎ 90円、135円」」

外部で関数「discount」を定義し、replaceメソッドの第２引数で呼び出しています。
処理内容が複雑な場合には、このほうが可読性が良いですね。

実践〜HTMLを書き換え。

実際にHTML要素の内容を取得し、関数の返り値に置換するサンプルです。

<p class = "upper"> ・うどんセットa
・うどんセットb </p>

・うどんセットa
・うどんセットb

<p>要素にclass名「upper」を指定しました。replaceに掛けたい場所が複数あるケースを想定しています。
現在、セット「a、b」のところが小文字で記載されています。これを大文字に置換してみましょう。

「「３//class要素をすべて取得」」「「１ ..①」」 let upper = document.querySelectorAll(".upper"); 「「３//大文字に変換する関数」」「「１ ..②」」 function 「「５oomoji」」(komoji) { return komoji.toUpperCase(); } 「「３//クラス要素すべてに処理をする」」「「１ ..③」」 upper.forEach(function(value) ｛ bb「「３//innerTextを書き換え」」「「１ ..④」」 bbvalue.innerText = value.innerText.replace(/[a-z]/g,「「５oomoji」」); ｝);

① 「upper」クラスの要素をすべて取得します。

② 小文字を大文字に変換するための関数です。
これをreplaceメソッドの第２引数に指定すると、引数「komoji」には正規表現パターンにマッチした文字列が渡されるようになります。

③ forEachメソッドで「upper」クラスのすべてに対して処理を行います。

④ 要素のテキストを書き換えます。

・すべてのアルファベットを取り出すパターンは「/[a-z]/g」となるので、これをreplaceの第１引数に。

・第２引数には、先ほど定義した関数「oomoji」を指定します。

・うどんセットa
・うどんセットb

結果⬆︎です。
小文字をすべて大文字に置換することができました。

replace、幅ひろがり。

最後までお読みくださり、ありがとうございます。

今回はreplace関数の引数に関数を適用する方法について紹介してきました。これまでreplaceメソッドは「パターン→単一の文字列」としてしか使えないものだったのが、「パターン→ある法則にしたがった結果」に置換できるようになり、使いどころが劇的にひろがりました。

この方法を使って、入力フォームのチェックなど、色々な場面に活用してくださいね。
ではまた〜 ♪