入力値が全角数値の場合、半角にしたい。[JavaScript]

###質問したいこと：ユーザーの入力した値が全角の数値である場合に半角に変換する関数を実装したいのですが関数が動作しません。
JavaScriptで入力された値が全角の数字の場合、半角に変換する機能を以下のような簡単な関数で実装しました。
が、該当箇所の関数が動作しません。(それ以外の箇所は意図した通りに動作します。)
＊今回質問したい箇所は下記のコードの1~6行目までです。

JavaScript
1//今回質問したい箇所は1~6行目までです。
2//guessFieldはHTMLの入力フォームの参照の入った変数で、この変数のvalueがユーザーの入力した数値となります。
3function checkGuess(){  
4      var userGuess = guessField.value.replace(/[\uff10-\uff19]/g,
5      function autoModHalf(){
6          return String.fromCharCode(guessField.value.charCodeAt(0) - 0xFEE0);
7      }
8      );
9      //valueの値はどんな値を入れてもまずString型となっているのでNumber()でNumber型にしている。
10      userGuess = Number(userGuess);
11      if(Number.isInteger(userGuess)){
12          if(guessCount === 1){
13            guesses.textContent = "前回の予想： ";
14          }
15          guesses.textContent += userGuess + " ";
16
17          if(userGuess === randomNumber){
18            lastResult.textContent = "おめでとう！正解です！";
19            lastResult.style.backgroundColor = "green";
20            lowOrHi.textContent = "";
21            setGameOver();
22          }else if(guessCount === 10){
23            lastResult.textContent = "!!!ゲームオーバー!!!";
24            setGameOver();
25          }else{
26            lastResult.textContent = "間違いです!";
27            lastResult.style.backgroundColor = "red";
28              if(userGuess < randomNumber){
29                lowOrHi.textContent = "今の予想は小さすぎです！もっと大きな数字です。";
30              }else if(userGuess > randomNumber){
31                lowOrHi.textContent = "今の予想は大きすぎです！もっと小さな数字です。"
32              }
33          }
34          guessCount++;
35          guessField.value ="";
36          guessField.focus();
37      }   
38      else{
39        alert("整数値を入力してください。");
40        guessField.value = "";
41        guessField.focus(); 
42      }
43      }
44      function setGameOver(){
45        guessField.disabled = true;
46        guessSubmit.disabled = true;
47        resetButton = document.createElement("button");
48        resetButton.textContent = "リセット";
49        document.body.appendChild(resetButton);
50        resetButton.addEventListener("click",resetGame);
51      }
52      function resetGame(){
53        guessCount = 1;
54        var resetParas = document.querySelectorAll(".resultParas p");
55        for(var i = 0;i < resetParas.length;i++){
56          resetParas[i].textContent = "";
57          }
58        resetButton.parentNode.removeChild(resetButton);
59
60        guessField.disabled = false;
61        guessSubmit.disabled = false;
62        guessField.value = "";
63        guessField.focus();
64
65        lastResult.style.backgroundColor = "white";
66
67        randomNumber = Math.floor(Math.random() * 100) + 1;
68        }
69    guessSubmit.addEventListener("click",checkGuess);
70    </script>

###試したこと正規表現の変更
/[\uff10-\uff19]/gを/[！-\uff5e]/gに変更しました。すると３３や４４のような十の位と一の位の数が同じような全角の数値は問題なく半角数字に変換されたのですが、３２や９１のような全角数字は半角の33や99に変換されてしまいました。この原因もよく理解できません。。。
###参考サイト
######JavaScript MDN
[このサイトに記載の数当てゲームのスクリプトを変更して上記のコードを作成しました。]
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash
######Webllica
[ここの文字コードを参考に正規表現のコードを作成しました。]
https://webllica.com/change-double-byte-to-half-width/

###環境
Mac OS Mojave version 10.14.6
ChromeBrowser
VScode

x_x

2019/08/19 08:13

「」という文字が混入していますが、除去するとどうなりますか？

digitalhimiko

2019/08/19 08:20

申し訳ありません。カギカッコ「」はスクリプトに入れていないと思っているのですが(汗)どの箇所に混在しているか教えていただけると助かります。

m.ts10806

2019/08/19 08:24 編集

(/[\uff10-\uff19]/g, 　↑

x_x

2019/08/19 08:24

かっこではなく、ですね。バックスペースのようです。

digitalhimiko

2019/08/19 08:36

お二人ともありがとうございます。バックスペースを抜くと関数が動くようになりました！ただ、やはり全角で９２や３５などと入力すると半角で99や33などと変換されてしまいます。。。

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

回答2件

ベストアンサー

functionに引数渡してその引数使ったらうまいこといきそうに思います。

js
1userGuess = val.replace(/[\uff10-\uff19]/g,
2      function autoModHalf(s){
3          return String.fromCharCode(s.charCodeAt() - 0xFEE0);
4      }
5);

投稿2019/08/19 08:46

m.ts10806

総合スコア80850

digitalhimiko

2019/08/19 08:52

回答ありがとうございます！確かに引数を渡すとうまくいきました！なぜ引数を与えると意図した動作になるのかも、もしわかりましたら教えていただけると助かります

m.ts10806

2019/08/19 09:03 編集

function autoModHalf(s){ の中で console.log(s) としてもらえれば分かりますが、正規表現でヒットした値を1つずつ（ループするように）全て渡してきています。本来は「ヒットした文字を半角に置換」とすべきなので、渡ってきたものだけを対応することで実現します。 guessField.value.charCodeAt(0) とすると「guessField.valueの1文字目を対応」するので1文字目と同じ文字が変換されて入るということになります。

digitalhimiko

2019/08/19 09:12

大変丁寧にわかりやすくありがとうございます！なぜsに順番に値が入っていくのかまだ理解出来ていないところはありますが、これについてはもう少し勉強します！ご回答いただきありがとうございました！

m.ts10806

2019/08/19 09:39

リファレンス読むと良いです。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace マッチするのが複数であれば、それぞれ処理する必要があります。（内部的には配列でループ実行されてるようなものかなぁと）

digitalhimiko

2019/08/19 14:25

丁寧にありがとうございます！JavaScript MDN表現が難しいので少し避けていましたが読む癖をつけます。「第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうる。」と教えていただいたページにも記載があり、おっしゃる通り、マッチした値が引数にループで代入されているようです。ただ、該当の記事を読んでもなぜ引数にmatchではなく適当な文字(例えばsとかdとかoffsetとか)を入れても問題なく関数が動作するのか私にはわかりませんでした。。。

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