JavaScriptのreplaceを使いこなす7つの方法

JavaScript replaceメソッドの使い方を解説する記事のサムネイル画像JS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのreplaceメソッドを使いこなすことができるようになります。

JavaScript初心者でも、replaceメソッドを使って文字列の置換を簡単に行えるようになるでしょう。

サンプルコードと応用例も紹介しているので、実践的な知識を身につけることができます。

●JavaScript replaceメソッドとは

JavaScriptのreplaceメソッドは、文字列の一部を別の文字列に置換する際に使用されます。

このメソッドは、文字列を操作するためのもので、検索パターンに一致する部分を指定した文字列で置き換えます。

●基本的な使い方

○サンプルコード1:単純な文字列の置換

このコードでは、単純な文字列の置換を行うコードを紹介しています。

この例では、”Hello, World!”の”World”を”JavaScript”に置き換えています。

const str = "Hello, World!";
const newStr = str.replace("World", "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

○サンプルコード2:大文字・小文字を区別せずに置換

このコードでは、大文字・小文字を区別せずに文字列の置換を行う方法を紹介しています。

この例では、”Hello, world!”の”world”を”JavaScript”に置き換えています。

const str = "Hello, world!";
const newStr = str.replace(/world/i, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

●応用例

○サンプルコード3:正規表現を使った置換

このコードでは、正規表現を使って文字列の置換を行う方法を紹介しています。

この例では、”apple orange banana”の各単語の先頭文字を大文字に変換しています。

const str = "apple orange banana";
const newStr = str.replace(/\b\w/g, match => match.toUpperCase());
console.log(newStr); // "Apple Orange Banana"

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

このコードでは、関数を使って動的に文字列を置換する方法を紹介しています。

この例では、”1 fish 2 fish”の数字をインクリメントしています。

const str = "1 fish 2 fish";
const newStr = str.replace(/\d+/g, match => parseInt(match, 10) + 1);
console.log(newStr); // "2 fish 3 fish"

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

このコードでは、複数の文字列を一度に置換する方法を紹介しています。

この例では、”I love cats, dogs, and birds”の”cats”, “dogs”, “birds”をそれぞれ”animals”に置き換えています。

const str = "I love cats, dogs, and birds";
const newStr = str.replace(/cats|dogs|birds/g, "animals");
console.log(newStr); // "I love animals, animals, and animals"

○サンプルコード6:HTMLタグを除去する

このコードでは、HTMLタグを除去する方法を紹介しています。

この例では、”<p>Hello, <strong>World</strong>!</p>”からHTMLタグを取り除いています。

const str = "<p>Hello, <strong>World</strong>!</p>";
const newStr = str.replace(/<[^>]+>/g, "");
console.log(newStr); // "Hello, World!"

○サンプルコード7:電話番号の整形

このコードでは、電話番号の整形を行う方法を紹介しています。

この例では、”080-1234-5678″を”(080) 1234-5678″に整形しています。

const phoneNumber = "080-1234-5678";
const formattedNumber = phoneNumber.replace(/^(\d{3})-(\d{4})-(\d{4})$/, "($1) $2-$3");
console.log(formattedNumber); // "(080) 1234-5678"

●注意点と対処法

  1. replaceメソッドは元の文字列を変更しないため、置換後の文字列を別の変数に格納する必要があります。
  2. 置換対象の文字列が見つからない場合、元の文字列がそのまま返されます。
    このような場合でもエラーが発生しないため、注意が必要です。

まとめ

この記事では、JavaScriptのreplaceメソッドの基本的な使い方から応用例まで紹介しました。

これらのサンプルコードを参考に、文字列の置換を効率的に行うことができるでしょう。

ただし、replaceメソッドの注意点と対処法も把握しておくことが重要です。

これで、あなたもJavaScriptのreplaceメソッドを使いこなせるようになりましたね。