JavaScriptで平仮名と半角カタカナを全角カタカナへ変換

JavaScript

Last updated at 2024-07-11Posted at 2024-07-11

やり方①：ボタン押下で変換

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォーカスアウトとボタン押下時の全角カタカナ変換</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="入力してください">
    <button onclick="convertToKatakana()">変換</button>

    <script>
        function toFullWidthKatakana(str) {
            return str.replace(/[\u3041-\u3096]/g, function(match) {
                // ひらがなを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) + 0x60);
            }).replace(/[\uFF61-\uFF9F]/g, function(match) {
                // 半角カタカナを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) - 0xCF25);
            });
        }

        function convertToKatakana() {
            const inputField = document.getElementById('inputField');
            const inputValue = inputField.value;
            const convertedValue = toFullWidthKatakana(inputValue);
            inputField.value = convertedValue;
        }

    </script>
</body>
</html>

やり方②：フォーカスアウト時に変換

補足：実は「ボタン押下」という動作をするときに「フォーカスアウト」も発火するので、ここにもしonclick設定なしのボタンを配置したら、押下時にonBlur発火で変換できる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォーカスアウト時の全角カタカナ変換</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="入力してください">

    <script>
        function toFullWidthKatakana(str) {
            return str.replace(/[\u3041-\u3096]/g, function(match) {
                // ひらがなを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) + 0x60);
            }).replace(/[\uFF61-\uFF9F]/g, function(match) {
                // 半角カタカナを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) - 0xCF25);
            });
        }

        function convertToKatakana() {
            const inputField = document.getElementById('inputField');
            const inputValue = inputField.value;
            const convertedValue = toFullWidthKatakana(inputValue);
            inputField.value = convertedValue;
        }

        document.getElementById('inputField').addEventListener('blur', convertToKatakana);

    </script>
</body>
</html>

やり方③：入力しながら変換

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リアルタイム全角カタカナ変換</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="入力してください">

    <script>
        function toFullWidthKatakana(str) {
            return str.replace(/[\u3041-\u3096]/g, function(match) {
                // ひらがなを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) + 0x60);
            }).replace(/[\uFF61-\uFF9F]/g, function(match) {
                // 半角カタカナを全角カタカナに変換
                return String.fromCharCode(match.charCodeAt(0) - 0xCF25);
            });
        }

        function convertInputToKatakana() {
            const inputField = document.getElementById('inputField');
            const inputValue = inputField.value;
            const convertedValue = toFullWidthKatakana(inputValue);
            inputField.value = convertedValue;
        }

        document.getElementById('inputField').addEventListener('input', convertInputToKatakana);
    </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

エンジニア特化した転職エージェントに相談してみませんか？PR

JavaScriptで平仮名と半角カタカナを全角カタカナへ変換

やり方①：ボタン押下で変換

やり方②：フォーカスアウト時に変換

やり方③：入力しながら変換

@curlneko(ユウ)

株式会社BeeX

JavaScript's like ranking last week

【JavaScript】ネイティブで集合演算できるようになった

polyfill.ioを使うのは危険かもしれない(危険だった)

【まとめ】これ知らないプログラマって損してんなって思う汎用的なツール 100超

【永久保存版】0からReactを勉強するならこのロードマップに従え！

Node.jsとはなにか？なぜみんな使っているのか？

Comments

Let's comment your feelings that are more than good

Being held Article posting campaign

生成AIに関する記事を書こう！

「組織」や「チーム」でのコミュニケーションについて、あなたの考えをシェアしよう!

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address