文字数カウンタースペース可視化

2023-07-31

半角スペースは .で、全角スペースは ␣ と表示されます。

テキストボックスに文字を入力してください：

入力された文字数: 0

可視化した文字列:

<style>
        .visible-space {
            white-space: pre-wrap;
            visibility: visible;
        }

        .invisible-space {
            white-space: pre-wrap;
            visibility: hidden;
        }
    </style>

    <label for="textInput">テキストボックスに文字を入力してください：</label>
    <input type="text" id="textInput" oninput="countCharacters()">

    <p>入力された文字数: <span id="charCount">0</span></p>

    <p>可視化した文字列: <span id="visibleText" class="visible-space"></span></p>

    <script>
        function countCharacters() {
            const textInput = document.getElementById('textInput');
            const charCount = document.getElementById('charCount');
            const visibleText = document.getElementById('visibleText');
            const text = textInput.value;
            charCount.textContent = text.length;
            visibleText.textContent = text.replace(/ /g, '.').replace(/　/g, '␣');
        }
    </script>