JavaScriptのreplace()メソッドを使って文字列を置換する方法について。本コラムでは、replace()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. replace()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 特定の文字列を置換する方法
2.2. 正規表現を使って該当の文字列を置換する方法
2.3. 正規表現を使って大文字小文字を無視して文字列を置換する方法
2.4. replaceメソッドの引数に関数を使う方法
1. replace()メソッド
1.1. replace()メソッドの基本書式
●replace()メソッド
stringObj.replace(searchvalue, newvalue)
1.2. パラメーター
searchvalue:置換対象の文字列を指定します。searchvalueは、newvalueで置き換えられます。searchvalueに正規表現を指定する事もできます。
newvalue:対象の文字列をnewvalueで置き換えます。newvalueには関数を指定して文字列を置換する事もできます。
1.3. 戻り値
置換後の新しい文字列を返します。
2. replace()メソッドの使い方
2.1. 特定の文字列を置換する方法
文章の特定の文字列を置換する場合には、JavaScriptのreplaceメソッドで部分文字列を置換する事ができます。
var stringObj = "置換対象の部分文字列を含む文字列";
stringObj.replace("置換対象の文字", "置換する文字"); //Stringオブジェクトの一部分を置換する
サンプルHTMLの「JS_Sample1.html」をコピーして置換の動作を確認してみましょう。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。
●JS_Sample1.html --------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>replace() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列で置換されます。</p>
<button onclick="strFunction01()">replaceの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var strObj = "replace メソッドは、文字列を置換するメソッドです。";
var result = strObj.replace("メソッド", "method");
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
--------------------------
「replace実行」ボタンをクリックして動きを確認して下さい。文字列「replace メソッドは、文字列を置換するメソッドです。」の内、日本語カナの「メソッド」を英語の「method」に置換します。但しStringオブジェクト内の全ての「メソッド」という文字列を置換するのではなく、一番最初に検索された文字列を置換します。
●実行結果
ボタンをクリックすると、指定の文字列で置換されます。
2.2. 正規表現を使って該当の文字列を置換する方法
置換対象の文字列を「正規表現」を使って指定する方法を確認してみましょう。
var stringObj = "置換対象の部分文字列を含む文字列";
stringObj.replace(正規表現, "置換する文字"); //Stringオブジェクトの一部分を置換する
●JS_Sample2.html --------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>replace() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列で置換されます。</p>
<p id="sample2">replace Methodは、文字列を置換するmethodです。</p>
<button onclick="strFunction02()">replaceの実行</button>
<script>
function strFunction02() {
var strObj = document.getElementById("sample2").innerHTML;
var result = strObj.replace(/method/g, "メソッド");
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
--------------------------
置換対象文字列に正規表現の「g(global)オプション」を付けて、対象文字列が複数あった場合に、全ての文字列を置換します。サンプルコードでは、英字の「method」を日本語カナの「メソッド」に置換します。置換対象の文字列に含まれる一番最初の「Method」は最初の一文字が大文字の「M」の為置換対象とはなりません。２番目の「method」のみが置換されます。
●実行結果
ボタンをクリックすると、指定の文字列で置換されます。
replace Methodは、文字列を置換するmethodです。
2.3. 正規表現を使って大文字小文字を無視して文字列を置換する方法
正規表現の「gi」オプションを使うと、大文字、小文字の違いを無視(ignore)して文字列を置換します。
var stringObj = "置換対象の部分文字列を含む文字列";
stringObj.replace(正規表現, "置換する文字"); //Stringオブジェクトの一部分を置換する
●JS_Sample3.html --------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>replace() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列で置換されます。</p>
<p id="sample3">Replace Methodは、文字列を置換するmethodです。</p>
<button onclick="strFunction03()">replaceの実行</button>
<script>
function strFunction03() {
var strObj = document.getElementById("sample3").innerHTML;
var result = strObj.replace(/method/gi, "メソッド");
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
--------------------------
正規表現に「gi」オプションを付けると、大文字・小文字の区別なしに該当の文字列を全て置換する事ができます。
●実行結果
ボタンをクリックすると、指定の文字列で置換されます。
Replace Methodは、文字列を置換するmethodです。
2.4. replaceメソッドの引数に関数を使う方法
置換する文字列に「関数」を指定する事もできます。
var stringObj = "置換対象の部分文字列を含む文字列";
stringObj.replace(置換対象の文字列, 関数); //Stringオブジェクトの一部分を置換する
●JS_Sample4.html --------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>replace() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列で置換されます。</p>
<p id="sample4">Replace Methodは、文字列を置換するmethodです。</p>
<button onclick="strFunction04()">replaceの実行</button>
<script>
function strFunction04() {
var str = document.getElementById("sample4").innerHTML;
var txt = str.replace(/replace|method|/gi, function (x) {
return x.toUpperCase();
});
document.getElementById("sample4").innerHTML = txt;
}
</script>
</body>
</html>
--------------------------
置換対象の文字列である「replece」と「method」を第二引数の関数を使って大文字に変換するサンプルコードです。ボタンをクリックすると、小文字から大文字に変換されますので確認してみて下さい。
●実行結果
ボタンをクリックすると、指定の文字列で置換されます。
Replace Methodは、文字列を置換するmethodです。
