javascriptでのreplaceとmatchの記述方法

（１）選択肢replace及びmatchを選択した際、①、②のようalertするようにしたいのですが可能でしょうか？

①replace：入力された文字を「変更されました」に置換して入力ボックスにも適用したい
②match：英語と数字が1文字ずつ交互になるのが一回以上マッチ

（２）また、コードが重複しているのでもっと簡潔に書ける方法があったら教えてください。

<html>
<head>
<meta charset="utf-8">
<meta robot="noindex">
</head>
<body>
    <form action="cgi-bin/formmail.cgi" method="post">
        <p>
        処理する値：<input type="text" name="name" size="40" id="input">
        </p>
        <p>モード：
        <select name="blood">
            <option value="choice" >お選びください</option>
            <option value="slice" >slice</option>
            <option value="split">split</option>
            <option value="substr">substr</option>
            <option value="trim">trim</option>
            <option value="length">length</option>
            <option value="replace">replace</option>
            <option value="match">match</option>
        </select></p>
        <button type="button" onclick="clicker();">実行</button>
    </form>
    <script>
        function clicker(){
            var input = document.getElementById('input').value;
            var result = input.length;
            if(result < 10){
                alert('10字以上入力ください');
            }
            
            var option = document.getElementsByTagName('option');
            if(option[0].selected){
                alert('他の選択肢をお選びください');
            }
            
            var option = document.getElementsByTagName('option'); 
            var slice = input.slice(0,5);
            if(result >= 10 && option[1].selected){
                alert(slice);
            }
            
            var option = document.getElementsByTagName('option'); 
            var split = input.split('で');
            if(result >= 10 && option[2].selected){
                alert(split);
            }
            
            var option = document.getElementsByTagName('option'); 
            var substr = input.substr(3,6);
            if(result >= 10 && option[3].selected){
                alert(substr);
            }
            
            var option = document.getElementsByTagName('option'); 
            var trim = input.trim();
            if(result >= 10 && option[4].selected){
                alert(trim);
            }
            
            var option = document.getElementsByTagName('option'); 
            var length = input.length;
            if(result >= 10 && option[5].selected){
                alert(length);
            }                  
        }
    </script>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

何度も option を取り直す必要はありません。

JavaScript
1            switch (document.forms[0].elements['blood'].value) {
2                // 略
3                case 'replace':
4                    {
5                        let replace = input.replace(/.*/, '変更されました');
6                        document.forms[0].elements['name'].value = replace;
7                        alert(replace);
8                    }
9
10                    break;
11                case 'match':
12                    alert(!!input.match(/[a-zA-Z][0-9]/));
13                    break;
14            }

投稿2018/08/28 08:11

x_x

総合スコア13749

（２）また、コードが重複しているのでもっと簡潔に書ける方法があったら教えてください。

例えばこんな書き方もできますな。

javascript
1function clicker(){
2    var select = document.getElementsByTagName("select")[0];
3    var holder = document.getElementById('input');
4    var input = holder.value;
5    
6    var result = input.length;
7    if(result < 10){
8        alert('10字以上入力ください');
9        return;
10    }
11
12    var option = document.getElementsByTagName('option');
13    
14    var func = {
15        choice  : ()=>{ alert('他の選択肢をお選びください'); },
16        slice   : ()=>{ alert(input.slice(0,5)); },
17        split   : ()=>{ alert(input.split('で')); },
18        substr  : ()=>{ alert(input.substr(3,6)); },
19        trim    : ()=>{ alert(input.trim()); },
20        length  : ()=>{ alert(input.length); },
21        replace : ()=>{ holder.value = "変更されました"; alert(holder.value); },
22        match   : ()=>{ 
23            // 「英語と数字が1文字ずつ交互になるのが一回以上マッチ」
24            // ↑この条件に一致したらどういう挙動をするのか記載がないので実装不能。
25        },
26    };
27    
28    func[option[select.selectedIndex].value]();
29}