JavaScriptで文字列置換を簡単に行う方法

String.replace()メソッドを使うと、指定したパターンと一致する文字列の一部またはすべてを新しい文字列に置き換えれます。

1度だけ置換

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>
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

スポンサードリンク

関連コンテンツ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です