置換

置換前文字列の検索文字列を置換文字列に全置換した結果を置換後文字列に表示します。

ソースコード公開

<form>
<textarea id="before" placeholder="置換前文字列"></textarea>
<input type="text" id="pattern" placeholder="検索文字列">
<input type="text" id="replacement" placeholder="置換文字列">
<input type="button" id="button" value="置換する" onclick="replace();">
<input type="reset" id="reset" value="クリア">
<textarea id="after" placeholder="置換後文字列" readonly></textarea>
</form>

<script>
/// <summary>
/// 全置換
/// </summary>
function replace() {
  let before = document.getElementById('before').value;
  let pattern = document.getElementById('pattern').value;
  let replacement = document.getElementById('replacement').value;
  let after = before.replaceAll(pattern, replacement);
  document.getElementById('after').value = after;
}
</script>

アルゴリズムの解説

String.prototype.replace() - JavaScript | MDN

replace() は String 値のメソッドで、pattern に一致する文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。pattern には文字列または正規表現 (RegExp) を指定するこ...

developer.mozilla.org

String.prototype.replaceAll() - JavaScript | MDN

replaceAll() は String 値のメソッドで、pattern に一致したすべての文字列を replacement で置き換えた新しい文字列を返します。pattern には文字列または RegExp を指定することができ、rep...

developer.mozilla.org