replace とは
- ここで説明する replace とは次の語句からなる Javascript のメソッドです。
- replace
- 読み: リプレイス
意味: 置き換える
replace メソッドの概要
このメソッドは、文字列型オブジェクトの値からパターンに該当する最初の箇所、または全ての箇所を任意の値に置き換えて新しい文字列を返します。 パターンが文字列の場合には最初の箇所のみの置き換えとなり、パターンが正規表現の場合には全ての箇所が置き換えの対象となります。
メソッドの引数には、任意の文字パターン、正規表現パターン、または正規表現オブジェクトを与え、「,」カンマで区切った後、置き換文字を与えます。
なお、このメソッドに使用する正規表現には「g」のフラグが必要です。
構文
サンプルを見る前に構文を確認しておきます。
const newStr = ##String.prototype.replace(/pattern/flag=g, newSubStr|function);
const newStr = ##String.prototype.replace("pattern", newSubStr|function);
var newStr = ##String.prototype.replace(##RegExp, newSubStr|function);
サンプルコードと実行結果 replace(/pattern/g, newSubstr)
このサンプルでは正規表現パターンを使った置き換えを行います。
span要素のコンテンツであるテキストの「置き換え対象」という部分を「置き換えた」というテキストに置き換えます。
サンプルコード: HTML
<body>
< span id="idSpan">[置き換え対象]文字と[置き換え対象]文字< /span>
</body>
- 02: span (この要素内の「置き換え対象」の文字を置き換えます。)
サンプルコード: script
<script>
let elmSpan = document.getElementById("idSpan");
let strOriginal = elmSpan.innerText;
elmSpan.innerText = strOriginal.replace(/置き換え対象/flag=g, "置き換えた");
</script>
- 04: 置き換え処理 (replace(/pattern/g, newSubstr)の記法でコーディングしています。)
サンプルコードと実行結果 replace("pattern", newSubstr)
このサンプルでは文字列のパターンを使った置き換えを行います。
span要素のコンテンツであるテキストの「置き換え対象」という部分を「置き換えた」というテキストに置き換えます。
サンプルコード: HTML
<body>
< span id="idSpan">[置き換え対象]文字と[置き換え対象]文字< /span>
</body>
- 02: span (この要素内の「置き換え対象」の文字を置き換えます。)
サンプルコード: script
<script>
let elmSpan = document.getElementById("idSpan");
let strOriginal = elmSpan.innerText;
elmSpan.innerText = strOriginal.replace("置き換え対象", "置き換えた");
</script>
- 04: 置き換え処理 (replace("pattern", newSubstr)の記法でコーディングしています。)
サンプルコードと実行結果 replace(regexp, function)
このサンプルではtextarea要素の入力テキストから「パターン」という部分を関数の戻り値に置き換えます。
引数のpatternには正規表現オブジェクトを与え、置換値には関数の戻り値を与える方法で処理を行っています。
関数の戻り値は、現在の時間が5時～19時までなら「こんにちは」となり、19時から5時までなら「こんばんは」となります。
サンプルコード: HTML
<body>
<div>
入力:<br>
<textarea id="idTextA" cols="50" rows="3" disabled>NameAさん、パターン。
NameBさん、パターン。</textarea>
</div>
<p>
結果:<br>
<output id="idOutput">innerText</output>
</p>
</body>
- 04-05: textarea (予めtextareaにサンプルテキストを入力した状態にしています。編集は無効です。)
- 09: output (置き換え結果を出力するための要素です。)
サンプルコード: script
<script>
const cstRegExp = new RegExp(/パターン/flag=g);
let strTextA = document.getElementById("idTextA").value;
let elmOutput = document.getElementById("idOutput");
elmOutput.innerText = strTextA.replace(cstRegExp, getCurrentHours());
function getCurrentHours(){
let objDate = new Date();
let numHours = objDate.getHours();
if(numHours > 18){
return "こんばんは";
}
else if(numHours < 5){
return "こんばんは";
}
else{
return "こんにちは";
}
}
</script>
- 02: cstRegExp (正規表現オブジェクトを定数に代入しています。)
- 03: strTextA (idTextAの内容をテキストとして変数に代入しています。)
- 04: elmOutput (idOutputの要素を変数に関連付けしています。)
- 05: 置換表示の処理 (置き換えた文字列をelmOutputのコンテンツに出力します。)
- 06-18: 関数を作成 (現在時刻によって「こんにちは」と「こんばんは」を返す関数です。)
結果: id="idOutput"
置き換え用の特殊文字について
ここでは置き換え対象の文字パターンではなく、置き換える文字のパターンについて説明しています。
置き換え文字には特殊な置き換えパターンを含めることができます。以下の表にパターンを掲載します。
| 置換パターン | 置換値 |
|---|---|
| $$ | "$" の文字に置き換えします。 |
| $& | /pattern/ にマッチした部分文字列に置き換えします。 |
| $` | /pattern/ にマッチした部分文字列の直前の文字列の部分に置き換えします。 |
| $' | /pattern/ にマッチした部分文字列の直後の文字列の部分に置き換えします。 |
| $n | n は 100 未満の正の整数です。第一引数がRegExpオブジェクトだった場合にn番目の括弧でキャプチャされた文字列を挿入します。インデックス番号は1から始まることに注意してください。 |
以下に「$&」のパターンを使ったサンプルを掲載しておきます。
サンプルコード: CSS
<style>
.clsSpan{
background-color: ##lightblue;
border: medium solid ##blue;
margin: 0 5px 0 5px;
padding: 1px 5px 1px 5px;
}
</style>
サンプルコード: HTML
<body>
<div id="idDiv">
山田さん、ようこそ。
山田さんが来てくださって、YWORKは嬉しいです。
</div>
</body>
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
let objPattern = new RegExp(/山田/flag=g);
elmDiv.innerHTML = elmDiv.innerHTML.replace(objPattern, '<span class="clsSpan">$&</span>');
</script>
山田さんが来てくださって、YWORKは嬉しいです。