JavaScriptで文字列置換を簡単に行う方法
String.replace()メソッドを使うと、指定したパターンと一致する文字列の一部またはすべてを新しい文字列に置き換えれます。
１度だけ置換
const p = 'one summer days. last summer.';
console.log(p.replace('summer', 'Summer')); // "one Summer days. last summer."
全てを置換
const p = 'one summer days. last summer.';
console.log(p.replace(/summer/g, 'Summer')); // "one Summer days. last Summer."
/ /は正規表現でパターンを指定します。
gはグローバルサーチを行うオプションです。文字列全体を見てすべてのマッチを返します。
replaceAll
String.replaceAll()メソッドを使っても、指定したパターンと一致する文字列のすべてを新しい文字列に置き換えれます。
const p = 'one summer days. last summer.';
console.log(p.replaceAll('summer', 'Summer')); // "one Summer days. last Summer."
Node.jsで使用する場合、v15.0.0未満では
replaceAll()メソッドに対応していないため、利用できません。サンプル
下記は入力された文字列から、数値以外を取り除き、掛け算を行うものです。
[^0-9]は0～9以外にマッチします。([の直後の^で否定となる)
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>掛け算</title>
<script type="text/javascript">
function calc() {
let cost = Number(document.getElementById('cost').value.replace(/[^0-9]/g, ''));
let num = Number(document.getElementById('num').value.replace(/[^0-9]/g, ''));
if (cost == '' || num == '') {
document.getElementById('total').value = '';
} else {
document.getElementById('total').value = cost * num;
}
}
</script>
<style>
body {
margin: 1em;
padding: 0;
}
</style>
</head>
<body>
<form>
<input id="cost" maxlength="5" size="10" onChange="calc();" name="cost" type="text">
<input id="num" maxlength="3" size="10" onChange="calc();" name="num" type="text">
<input id="total" size="20" name="total" type="text" readonly>
</form>
</body>
</html>
