JS 文字列 replace() メソッド

イントロ

string replace() メソッドは通常、JavaScript の学習の早い段階で学習しますが、その時点で取り上げられるのは基本的な使用方法だけであり、通常は後でこのトピックを再検討することはありません。その結果、多くの JavaScript 開発者は Javascript を最も基本的な形式でのみ使用しています。

基本的な使用法

replace() の基本的な使用法には、2 つの文字列を渡すことが含まれます。 1 つ目は置換される文字列で、2 つ目は置換に使用される文字列です。

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

これにより、次の出力が生成されます:

The quick brown fox flies over the lazy dog.

正規表現

replace() の最初のパラメータとして文字列を指定する代わりに、正規表現を指定することもできます。

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

d は数字と一致し、{4} は数字のうち 4 つと正確に一致します。先頭と末尾の b は境界と一致します。これにより、4 桁を超える数値の一部が一致することがなくなります。 実際の使用では、4 桁のシーケンスを電話番号やクレジット カード番号の一部と区別するために追加のコードが必要になる場合がありますが、これは正規表現のチュートリアルを目的としたものではないため、省略しました。

置換機能

replace() メソッドの 2 番目のパラメータには関数を指定できます。この関数が返すものはすべて、最初のパラメータで指定された一致したテキストを置換するために使用されます。これは、最初のパラメータとして指定された文字列と正規表現の両方で機能します。

replace() の最初のパラメータが文字列またはキャプチャ グループのない正規表現の場合、replacer 関数には次の順序で 3 つのパラメータが渡されます。

1. 一致したテキスト
2. 試合の順位
3. 元の完全な文字列

replace() の最初のパラメータがキャプチャ グループを含む正規表現の場合、最後の 2 つを除く 2 番目以降のすべてのパラメータがキャプチャになります。最後から 2 番目は最初のキャプチャの位置となり、最後のパラメータは元の完全な文字列になります。

正規表現がグローバル フラグとともに使用されている場合、関数は一致が見つかるごとに 1 回呼び出されます。

文字列は定数値であり、一般にその置換を事前に計算することが可能であるため、replacer 関数には replace() の最初のパラメータとして文字列が伴うことはあまりありません。 ただし、文字列とともに使用して次のようなことを行うことはできます:

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

これは「」を置き換えます。 names 配列からランダムに選択された文字列を使用して、次のようなランダムな文を生成します:

We hold these truths to be self-evident, that all dogs are created equal.

RegEx と Replacer 関数を組み合わせる

replacer 関数の真価は、replace() の最初のパラメータとして正規表現と組み合わせることで発揮されます。正規表現はパターンに一致するため、事前に不明な文字列にも一致する可能性があるため、一致したテキストを処理して置換を生成する関数が必要になる場合があります。

スネークケースをキャメルケースに変換する例を次に示します:

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

w はテキストの 1 文字に一致します。正規表現ではアンダースコアの後に来るため、アンダースコアの後の最初の文字と一致します。括弧は、文字列の一部としてアンダースコアを含まず、この文字のみを含むキャプチャ グループを作成するために使用されます。 (一致の 2 番目の文字を取得するだけなら簡単ですが、キャプチャ グループを説明したかったのです。) この文字は replacer 関数によって 2 番目のパラメータとして受け取られ、大文字にされて返されます。もともとアンダースコアと文字で構成されていた部分文字列全体の代わりとして、アンダースコアが消去され、その後に続く文字が大文字になります。

これは、16 進カラー コードを RGB カラーに変換する別の例です。

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

結果の出力は次のとおりです:

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

正規表現は、# の直後に 0 ～ 9 および A ～ F の文字として定義される 6 桁の 16 進数と一致します。 i フラグは大文字と小文字の両方で機能するため、大文字と小文字の区別を無視するために使用されます。 replacer 関数は 16 進コードから部分文字列を取得し、解析して 10 進数を生成します。これらの数値は「rgb(」と「)」の間に配置されて rgb() カラーを生成します。

結論

既存の文字列を変更する方法はたくさんありますが、位置ではなく内容に基づいて部分文字列を置換することが目的の場合は、 replace() メソッドを使用するのが良い選択となることがよくあります。 これがなければ、一般的な解決策では、最初に部分文字列の位置を検索し、次にその位置で文字列を分割し、置換文字列と連結することになりますが、これは効率的ではありません。

以上がJS 文字列 replace() メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。