TypeScriptのreplaceメソッドを完全解説！たった10のサンプルコードでマスター

はじめに
●replaceメソッドとは？
- ○replaceメソッドの基本
●replaceメソッドの使い方
●replaceメソッドの応用例
●注意点と対処法
●カスタマイズ方法
- ○replaceメソッドのカスタマイズの例
まとめ

はじめに

TypeScriptを使用する中で、文字列の置換が必要になる場面は多々あります。そんな時に活躍するのが、replaceメソッドです。

この記事では、初心者の方でも理解できるように、TypeScriptのreplaceメソッドの基本から、その使い方、サンプルコードを交えた実例、そして注意点やカスタマイズ方法までを詳しく解説していきます。

この記事を読むことで、replaceメソッドを効果的に使いこなせるようになり、あなたのTypeScriptのスキルアップにつながることでしょう。

●replaceメソッドとは？

replaceメソッドは、文字列を操作するためのメソッドの一つであり、指定したパターンの文字列を別の文字列に置き換える機能を持っています。

TypeScriptでは、JavaScriptの文字列メソッドをそのまま利用することができるため、replaceメソッドもJavaScriptと同じように使用することができます。

基本的な形式は次のようになっています。

str.replace(検索文字列, 置換文字列);

str：置換を行いたい文字列。
検索文字列：置換の対象となる文字列や正規表現。
置換文字列：検索文字列を置き換える新しい文字列。

このコードを実行すると、str内の検索文字列が置換文字列に置き換えられた新しい文字列が生成されます。

元のstrは変更されない点に注意してください。

例えば、次のサンプルコードでは、文字列 “Hello, World!” の中の “World” を “TypeScript” に置き換えています。

let greeting = "Hello, World!";
let result = greeting.replace("World", "TypeScript");

このコードを実行すると、resultには “Hello, TypeScript!” という文字列が格納されます。

○replaceメソッドの基本

replaceメソッドは非常に柔軟で、様々な置換のニーズに応えることができるツールです。

最も基本的な使い方から、正規表現を使用した高度な置換まで、幅広く対応しています。

まず、基本的な文字列の置換について見ていきましょう。

let text = "私はリンゴが好きです。でも、リンゴは高いです。";
let newText = text.replace("リンゴ", "バナナ");

このコードでは、文字列 “私はリンゴが好きです。でも、リンゴは高いです。” の中の最初の “リンゴ” を “バナナ” に置き換えています。

注意して欲しいのは、replaceメソッドは最初に一致した部分だけを置換する性質があるため、このコードの場合、newTextには “私はバナナが好きです。でも、リンゴは高いです。” という文字列が格納されます。

●replaceメソッドの使い方

JavaScriptやTypeScriptで文字列の一部を置換する際に利用するメソッドが、replaceメソッドです。

このメソッドを使用することで、特定の文字やパターンに一致する部分を簡単に置換することができます。

例えば、文中の特定のキーワードを強調したいときや、誤字を修正するときなど、多岐にわたって活用できるため、TypeScriptを学ぶ際には欠かせない知識となります。

TypeScriptにおけるreplaceメソッドは、基本的にはJavaScriptのreplaceメソッドと同じ使い方ですが、型安全性が要求されることが多いので、適切な型の指定や使用方法を理解しておくことが大切です。

○サンプルコード1：文字列の置換

最も基本的なreplaceメソッドの使用方法を紹介します。

// TypeScriptのサンプルコード
let message: string = "こんにちは、世界！";
let replacedMessage: string = message.replace("世界", "TypeScript");

console.log(replacedMessage);

このコードでは、変数messageに代入された”こんにちは、世界！”という文字列から”世界”という部分を”TypeScript”に置換しています。

したがって、replacedMessageの内容は”こんにちは、TypeScript！”という文字列になります。

上記のコードを実行すると、出力結果として”こんにちは、TypeScript！”が表示されます。

○サンプルコード2：正規表現を使用した置換

TypeScriptのreplaceメソッドは、文字列の一部を新しい文字列に置換するためのメソッドですが、正規表現を組み合わせることで、より柔軟な置換が可能になります。

正規表現を使うと、特定のパターンを持つ文字列を一度に置換できるので、文字列処理を行う際の強力なツールとなります。

まず、基本的な正規表現を使用した置換のコードをご紹介します。

const str = "TypeScriptは最高です。TypeScriptを学ぶことは楽しいです。";
const result = str.replace(/TypeScript/g, "TS");
console.log(result);

このコードでは、文字列strの中の「TypeScript」という文字を「TS」に置換しています。

/TypeScript/gは正規表現のパターンです。

ここで/gフラグが付いているのは、文字列全体から「TypeScript」という文字を繰り返し置換するためです。

このコードを実行すると、次のような結果が得られます。

「TSは最高です。TSを学ぶことは楽しいです。」

見ての通り、元の文字列から「TypeScript」がすべて「TS」に置換された結果が出力されました。

次に、正規表現を使って特定のパターンを持つ文字列を置換する例を見てみましょう。

const phoneNumber = "080-1234-5678";
const maskedNumber = phoneNumber.replace(/\d{2,4}/g, "****");
console.log(maskedNumber);

このコードでは、文字列phoneNumber内の2~4桁の数字を****に置換しています。

\dは数字を表す正規表現の特殊文字で、{2,4}は直前の文字が2回から4回繰り返される場合にマッチすることを表しています。

このコードを実行すると、次のような結果が得られます。

「–-****」

これで、電話番号の数字部分をマスキングすることができました。

このように正規表現を使うことで、特定のパターンを持つ文字列を効率的に置換することができます。

○サンプルコード3：関数を使った動的な置換

replaceメソッドは、単純な文字列の置換や正規表現を使用した置換だけでなく、関数を使って動的な置換を行うことも可能です。

関数を用いることで、置換対象の文字列に基づいて独自の処理を加えた結果を新しい文字列として返すことができます。

これにより、非常に柔軟な文字列操作が行えるようになります。

このコードでは、正規表現を使って文字列内の数字を探し、それぞれの数字を二倍にした結果を返す関数を用いて、動的な置換を行っています。

const str = "リンゴが5個、バナナが3本、みかんが8個あります。";
const doubledStr = str.replace(/\d+/g, (match) => {
    const num = parseInt(match, 10);
    return String(num * 2);
});
console.log(doubledStr);

このコードを実行すると、元の文字列str内の数字がすべて二倍になった新しい文字列が出力されます。

例として、元の文字列が「リンゴが5個、バナナが3本、みかんが8個あります。」であった場合、出力結果は「リンゴが10個、バナナが6本、みかんが16個あります。」となります。

また、関数を使った動的な置換の応用例としては、次のようなケースが考えられます。

文字列内の特定の単語を他の単語に置換するが、置換する単語をランダムに選ぶ。
日付や時刻のフォーマットを検出し、異なるフォーマットに変換する。

const dateStr = "今日は2023-09-03です。";
const formattedDateStr = dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/g, (match, year, month, day) => {
    return `${year}年${month}月${day}日`;
});
console.log(formattedDateStr);  // 今日は2023年09月03日です。

このコードでは、replaceメソッドと正規表現を使って、YYYY-MM-DD形式の日付をYYYY年MM月DD日形式に変換しています。

●replaceメソッドの応用例

replaceメソッドを使った基本的な操作や使い方を学んだ後、さらに高度な応用例についても理解することで、実践的なシーンでの利用範囲が大幅に広がります。

それでは、具体的なサンプルコードを交えながら、replaceメソッドの応用的な使い方を解説していきます。

○サンプルコード4：複数の文字列を一度に置換

日常的なプログラミング作業の中で、一つの文字列内に複数の異なる部分を置換したいという場面がしばしば出てきます。

このような場面では、一度の操作で複数の置換を行うことが効率的です。

下記のコードは、一つの文字列内で複数のキーワードを異なる文字列に置換する方法を表しています。

// TypeScriptのコード例
const originalText = "appleとbananaとcherryが好きです。";
const replacedText = originalText
    .replace("apple", "オレンジ")
    .replace("banana", "メロン")
    .replace("cherry", "ぶどう");
console.log(replacedText);

このコードでは、元の文字列originalTextに対して、replaceメソッドを連続して3回適用しています。

それぞれのreplaceメソッドで指定されたキーワードを新しい文字列に置換し、その結果をreplacedTextに格納しています。

このコードを実行すると、元の文字列の”apple”は”オレンジ”に、”banana”は”メロン”に、”cherry”は”ぶどう”に置換された新しい文字列が出力されます。

つまり、結果として「オレンジとメロンとぶどうが好きです。」という文字列がコンソールに表示されることになります。

○サンプルコード5：置換した結果を利用する

TypeScriptでは、replaceメソッドの結果を直接活用することが可能です。

一般的に、文字列操作を行うとき、特定の部分の文字列を置換した後に、その結果を他の処理で使うケースはよくあります。

今回は、置換の結果を変数に代入し、その変数を使用して何らかの処理を行う簡単な例を紹介します。

// 文字列定義
let originalText = "私の名前は山田太郎です。";

// "山田太郎"を"佐藤次郎"に置換
let replacedText = originalText.replace("山田太郎", "佐藤次郎");

// 置換結果の出力
console.log("置換後の文:", replacedText);

// 置換した文字列を利用しての処理
if (replacedText.includes("佐藤")) {
    console.log("佐藤さんですね。");
}

このコードでは、まず初めにoriginalTextという変数に文字列を定義しています。

次に、その文字列の中の”山田太郎”を”佐藤次郎”に置換し、その結果をreplacedTextという変数に代入しています。

その後、console.logを使って置換後の文字列を出力しています。

最後に、replacedTextの中に”佐藤”という文字列が含まれているかどうかをチェックし、含まれていれば”佐藤さんですね。”と出力します。

このコードを実行すると、次の結果が得られます。

置換後の文: 私の名前は佐藤次郎です。
佐藤さんですね。

○サンプルコード6：特定の位置の文字を置換

TypeScriptのreplaceメソッドを使う際、文字列の特定の位置にある文字を対象として置換したい場面があります。

例えば、電話番号の形式を変更するときや、クレジットカードの一部をマスキングするときなど、具体的な位置の文字を操作する必要が出てきます。

そういった場合、正規表現や関数を組み合わせて、replaceメソッドを活用することで、目的の位置の文字を効果的に置換することができます。

それでは、具体的なサンプルコードと共に、特定の位置の文字を置換する方法を詳しく解説していきます。

let str = "1234-5678-9012";
let replacedStr = str.replace(/(\d{4})-(\d{4})-(\d{4})/, "$1-****-$3");
console.log(replacedStr); // 出力: 1234-****-9012

このコードでは、クレジットカードの中央の数字4つをマスキングしています。

正規表現/(\d{4})-(\d{4})-(\d{4})/は、ハイフンで区切られた3つの4桁の数字をキャッチします。

括弧で囲んである部分がキャプチャリンググループで、それぞれのグループは後から$1, $2, $3として参照することができます。

replaceメソッドの第二引数には、置換後の文字列を指定しますが、この例では$1-****-$3と指定しています。

これにより、最初の4桁の数字はそのまま、次の4桁の数字は****に置換し、最後の4桁の数字もそのままとなります。

このコードを実行すると、変数replacedStrには、1234-****-9012という文字列が格納されます。

元のクレジットカードの中央4桁がマスキングされた形となり、安全に表示することができます。

この方法は、特定の位置の文字を置換するだけでなく、特定のパターンを持つ文字列を置換する際にも役立ちます。

正規表現の知識を深めることで、更に多彩な文字列操作が可能となります。

○サンプルコード7：大文字・小文字の置換

TypeScriptでの文字列操作の中で、特に多用されるのが「replaceメソッド」です。

このメソッドを利用することで、文字列内の特定の部分を別の文字列に置換することができます。

今回は、大文字と小文字の置換に特化した解説を行います。

文字列中の大文字を小文字に、または小文字を大文字に変換する場合には、正規表現と組み合わせてreplaceメソッドを使用します。

具体的には、/[A-Z]/gという正規表現を用いることで、全ての大文字をマッチさせることができます。

同様に、/[a-z]/gを使用することで全ての小文字をマッチさせることができます。

// 大文字を小文字に変換するサンプルコード
const text1 = "Hello TypeScript!";
const replacedText1 = text1.replace(/[A-Z]/g, match => match.toLowerCase());
console.log(replacedText1);  // hello typescript!

// 小文字を大文字に変換するサンプルコード
const text2 = "Hello TypeScript!";
const replacedText2 = text2.replace(/[a-z]/g, match => match.toUpperCase());
console.log(replacedText2);  // HELLO TYPESCRIPT!

このコードでは、replaceメソッドの第二引数に関数を指定しています。

マッチした部分（大文字または小文字）がこの関数の引数に渡され、その関数内で大文字に変換する操作や小文字に変換する操作を行っています。

そして、その結果が置換後の文字列として使用されます。

このコードを実行すると、hello typescript!とHELLO TYPESCRIPT!がそれぞれ出力されます。

大文字だけを小文字に変換し、小文字だけを大文字に変換する操作を確認できます。

○サンプルコード8：HTMLタグのエスケープ

Webアプリケーションを開発する際、ユーザーからの入力をそのまま表示することはセキュリティ上のリスクとなることがあります。

その一つが、XSS（クロスサイトスクリプティング）と呼ばれるセキュリティの脆弱性です。

ユーザーからの入力にHTMLタグやスクリプトが含まれている場合、それがそのまま実行されてしまう可能性があります。

そこで、ユーザーからの入力文字列内のHTMLタグをエスケープするための処理が必要です。

ここでは、TypeScriptのreplaceメソッドを使って、このエスケープ処理を実装する方法を解説します。

HTMLタグをエスケープするためのサンプルコードを紹介します。

// HTMLタグのエスケープ処理
function escapeHTML(str: string): string {
    return str.replace(/&/g, '&amp;')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#39;');
}

// サンプルの文字列
const inputString = '<script>alert("XSS Attack!");</script>';

// エスケープ処理を適用
const escapedString = escapeHTML(inputString);
console.log(escapedString);

このコードでは、まずescapeHTMLという関数を定義しています。

この関数は文字列を受け取り、その文字列内の特定の文字をHTMLエンティティに置換することで、HTMLタグのエスケープを行います。

具体的には、&を&に、<を<に、>を>に、"を"に、'を'にそれぞれ置換しています。

サンプルの文字列inputStringには、悪意のあるスクリプトが含まれています。

この文字列をescapeHTML関数に渡すことで、エスケープ処理を適用した結果をescapedStringに格納しています。

最後に、エスケープ処理後の文字列をコンソールに出力します。

このコードを実行すると、<script>alert("XSS Attack!");</script>という文字列が、<script>alert("XSS Attack!");</script>という形にエスケープされた文字列としてコンソールに出力されます。

このように、エスケープされた文字列はブラウザ上で正しく表示されるだけでなく、スクリプトとして実行されることもありません。

このエスケープ処理は、Webアプリケーションのセキュリティを確保するための基本的な手法の一つです。

ユーザーからの入力をそのまま表示する際には、必ずこのようなエスケープ処理を行うようにしましょう。

○サンプルコード9：URLのクエリストリングの置換

URLのクエリストリングは、多くのWebアプリケーションでパラメータを伝達するために使用されます。

この部分は特に、Webページの動的な内容や、特定の情報を持つページへのリダイレクトでよく使われる部分です。

TypeScriptでURLのクエリストリングを置換するための方法を理解することで、ウェブアプリケーションの制作や管理がよりスムーズに行えるようになります。

URLのクエリストリングを置換するための簡単なサンプルコードを紹介します。

// サンプルコード
function replaceQueryString(url: string, newQuery: string): string {
    const baseURL = url.split('?')[0];
    return `${baseURL}?${newQuery}`;
}

const originalURL = 'https://example.com/page?param1=value1&param2=value2';
const replacedURL = replaceQueryString(originalURL, 'param1=newValue1&param2=newValue2');
console.log(replacedURL);

このコードでは、replaceQueryStringという関数を使ってURLのクエリストリングを置換しています。関数は2つの引数をとります。

1つ目のurlは置換される元のURL、2つ目のnewQueryは新しいクエリストリングです。

関数の中で、split('?')を使ってURLを「?」で分割しています。

その後、新しいクエリストリングと結合して、新しいURLを生成しています。

このコードを実行すると、https://example.com/page?param1=newValue1&param2=newValue2という新しいURLが得られます。

この方法はシンプルで、基本的なURLのクエリストリングの置換には十分対応可能ですが、複雑なクエリストリングや複数のパラメータを持つURLの場合、もう少し複雑なロジックが必要となることも考えられます。

また、この方法は元のURLにすでに複数のクエリストリングがある場合、それらをすべて置換する形となるため、特定のパラメータのみを変更したい場合には別のアプローチが必要です。

応用例として、特定のクエリパラメータだけを置換する場合のサンプルコードを紹介します。

// 応用例: 特定のクエリパラメータだけを置換
function replaceSpecificQueryParameter(url: string, key: string, newValue: string): string {
    const [baseURL, queryString] = url.split('?');
    if (!queryString) return url;

    const parameters = queryString.split('&');
    const newParameters = parameters.map(param => {
        const [currentKey, currentValue] = param.split('=');
        if (currentKey === key) {
            return `${key}=${newValue}`;
        }
        return param;
    });

    return `${baseURL}?${newParameters.join('&')}`;
}

const targetURL = 'https://example.com/page?param1=value1&param2=value2';
const modifiedURL = replaceSpecificQueryParameter(targetURL, 'param1', 'newValue1');
console.log(modifiedURL);

このコードでは、replaceSpecificQueryParameter関数を使用して、指定したキーのクエリパラメータのみを新しい値に置換しています。

この関数は3つの引数をとります。

1つ目のurlは元のURL、2つ目のkeyは置換するクエリのキー、3つ目のnewValueは新しい値です。

○サンプルコード10：カスタムクラスでのreplaceメソッドのオーバーライド

TypeScriptでは、独自のクラスを定義してそのクラスにメソッドを追加することができます。

しかし、すでに存在するメソッド名を使用して新しいメソッドを作成する場合、オーバーライド（上書き）することが求められることがあります。

ここでは、カスタムクラス内でのreplaceメソッドのオーバーライド方法を解説します。

まず、基本的なクラス定義から始めます。

下記のコードでは、CustomStringというクラスを定義しています。

このクラスは、内部で文字列を管理するvalueというプロパティを持っています。

class CustomString {
    value: string;

    constructor(value: string) {
        this.value = value;
    }

    display() {
        console.log(this.value);
    }
}

このクラスには、コンストラクタで受け取った文字列をvalueに格納し、displayメソッドでその文字列をコンソールに表示する機能が備わっています。

次に、このクラスにreplaceメソッドを追加しましょう。

しかし、通常のreplaceメソッドとは異なる動作をさせたいため、メソッドのオーバーライドを行います。

以下のコードでは、replaceメソッドをカスタマイズしています。

このカスタムメソッドでは、指定した文字列を置換するのではなく、指定した文字列の前後に[と]を追加します。

class CustomString {
    // ...（上記のコードは省略）

    replace(target: string, replacement: string): void {
        this.value = this.value.split(target).join(`[${replacement}]`);
    }
}

このコードでは、splitとjoinメソッドを使って、指定されたtarget文字列の位置を特定し、その位置に[replacement]を挿入しています。

このカスタムクラスのreplaceメソッドを使って文字列を変更すると、次のような結果となります。

const myString = new CustomString("Hello, world!");
myString.replace("world", "TypeScript");
myString.display();

このコードを実行すると、Hello, [TypeScript]!という結果がコンソールに表示されます。

通常のreplaceメソッドとは異なり、指定した文字列の前後に[と]が追加されていることがわかります。

●注意点と対処法

TypeScriptでのreplaceメソッドの利用には、いくつかの注意点が存在します。

ここでは、それらの注意点と、それに対する適切な対処法について詳しく解説します。

○replaceメソッドは元の文字列を変更しない

初心者の方は、replaceメソッドを使用した後、元の文字列が変更されたと誤解することがあります。

しかし、実際にはreplaceメソッドは新しい文字列を返し、元の文字列は変更されません。

let originalString = "hello world";
let newString = originalString.replace("world", "TypeScript");

console.log(originalString);  // "hello world"
console.log(newString);       // "hello TypeScript"

このコードでは、”world”という文字列を”TypeScript”に置換しています。

しかし、元のoriginalStringは変更されず、新しい文字列がnewStringに格納されます。

結果として、元の文字列originalStringは”hello world”のままで、新しい文字列newStringは”hello TypeScript”となります。

○正規表現のフラグを忘れると一度しか置換されない

正規表現を用いて文字列を置換する場合、gフラグを付けないと最初の一致のみが置換されます。

全ての一致を置換するにはgフラグを使用する必要があります。

let testString = "apple banana apple grape";
let replacedString = testString.replace(/apple/, "orange");

console.log(replacedString);  // "orange banana apple grape"

このコードでは、”apple”を”orange”に置換しようとしていますが、gフラグが付けられていないため、最初の”apple”のみが置換されます。

結果として、文字列replacedStringは”orange banana apple grape”となり、2つ目の”apple”は置換されていません。

対処法としては、全ての”apple”を置換したい場合は正規表現にgフラグを付けるようにしましょう。

let testString2 = "apple banana apple grape";
let replacedString2 = testString2.replace(/apple/g, "orange");

console.log(replacedString2);  // "orange banana orange grape"

結果として、文字列replacedString2は”orange banana orange grape”となり、すべての”apple”が”orange”に置換されています。

○replaceメソッドの第二引数に関数を渡す際の注意

replaceメソッドの第二引数に関数を渡すことで、動的な置換が可能です。

しかし、この関数の引数にはいくつかの注意点があります。

関数の第一引数はマッチした文字列、第二引数以降はマッチしたサブグループ、最後の2つの引数はマッチした位置と元の文字列となります。

let url = "https://example.com?id=100&name=test";
let replacedUrl = url.replace(/(\?|\&)([^=]+)=([^&]+)/g, function(match, p1, p2, p3){
    return p1 + p2 + "=" + encodeURIComponent(p3);
});

console.log(replacedUrl);  // "https://example.com?id=100&name=test"

このコードでは、URLのクエリストリングの値部分をエンコードしています。

関数の引数を活用して、マッチしたサブグループを取得し、エンコードを行っています。

結果として、文字列replacedUrlは”https://example.com?id=100&name=test”となり、クエリストリングの値部分がエンコードされています。

●カスタマイズ方法

TypeScriptで文字列の操作に利用するreplaceメソッドは非常に強力です。

しかし、その機能を更に拡張し、より柔軟に使いたい場合があります。

ここでは、replaceメソッドをカスタマイズして、特定のニーズに合わせて実行する方法を取り上げます。

○replaceメソッドのカスタマイズの例

TypeScriptでは、replaceメソッドを拡張する方法の一つとして、カスタムクラスを作成し、その中でreplaceメソッドをオーバーライドする方法が考えられます。

例として、特定のキーワードのみを置換する機能を持つカスタムreplaceメソッドを考えます。

下記のサンプルコードでは、”apple”, “banana”, “cherry”というフルーツの名前のみを大文字に置換するカスタムreplaceメソッドを実装しています。

class CustomString {
    private value: string;

    constructor(value: string) {
        this.value = value;
    }

    // カスタムreplaceメソッド
    customReplace(): string {
        const fruits = ["apple", "banana", "cherry"];
        let result = this.value;

        fruits.forEach(fruit => {
            // ここでは正規表現を使ってフルーツの名前を大文字に置換しています。
            result = result.replace(new RegExp(fruit, "g"), fruit.toUpperCase());
        });

        return result;
    }
}

// 使い方
const str = new CustomString("I like apple, banana, and cherry.");
console.log(str.customReplace());

このコードでは、CustomStringというクラスを作成しています。

このクラスには、カスタムreplaceメソッドとしてcustomReplaceメソッドを実装しており、特定のフルーツの名前を大文字に置換する機能を持っています。

上記のサンプルコードを実行すると、"I like APPLE, BANANA, and CHERRY."という結果が得られます。

このように、既存のreplaceメソッドをカスタマイズして、特定の条件下でのみ置換を行うようなメソッドを実装することができます。