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

はじめに
●JavaScript replaceメソッドとは
●基本的な使い方
- ○サンプルコード1：単純な文字列の置換
- ○サンプルコード2：大文字・小文字を区別せずに置換
●応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、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"