1
0

JavaScriptで半角数字を全角数字に変換する

Posted at

やり方

画面で作ってみました
image.png

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字変換ツール</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        input, button {
            font-size: 16px;
            margin: 10px 0;
        }
        .output {
            font-size: 20px;
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>半角数字を全角数字に変換</h1>
    <label for="input-number">半角数字を入力してください:</label>
    <input type="text" id="input-number">
    <button onclick="convertToFullWidth()">変換</button>
    <p>変換後の数字: <span class="output" id="output-number"></span></p>

    <script>
        function toFullWidthNumber(numStr) {
            const offset = '0'.charCodeAt(0) - '0'.charCodeAt(0);
            return numStr.replace(/[0-9]/g, function(ch) {
                return String.fromCharCode(ch.charCodeAt(0) + offset);
            });
        }

        function convertToFullWidth() {
            const inputNumber = document.getElementById('input-number').value;
            const outputNumber = toFullWidthNumber(inputNumber);
            document.getElementById('output-number').textContent = outputNumber;
        }
    </script>
</body>
</html>

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0