随机密码生成器，客户端可以更改每个字符的数量

Question

我目前正在使用随机密码生成器。我希望我的生成器从某种类型中产生可变数量的字符。我希望字符类型为：大写字母，常规字母，数字和特殊字符（！@＃$％^＆*）

例如：（数字：3，字母：2，大写字母：1，（！@＃$％^＆*）：2）的输出将是：" *a49s@1R "，但我当前的代码不是工作。

function myFunction() {
  var n = document.getElementById("myText").value;
  var l = document.getElementById("myletter").value;
  var cl = document.getElementById("mycapitalletter").value;
  var overall = cl + l + n
  var ran;
  password = ""
  var i = 1

  /*here is the javascript method *not working* */
  while (i <= overall) {
    ran = Math.floor(Math.random() * 3);
    if (ran == 2 && cl != 0 && overall > 0) {
      var letter = "";
      var choice = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      firstletter += choice.charAt(Math.floor(Math.random() * choice.length));
      password = password + "" + firstletter;
      overall--;
      cl--;
    } else {
      if (ran == 1 && l != 0 && overall > 0) {

        var choice = "abcdefghijklmnopqrstuvwxyz";
        firstletter += choice.charAt(Math.floor(Math.random() * choice.length));
        password = password + "" + firstletter;
        overall--;
        l--;
      }
      if (ran == 0 && n != 0 && overall > 0) {
        firstletter = Math.floor(Math.random() * 10);
        password = password + "" + firstletter;
        overall--;
        n--;
      }
    }
  }

  var myWindow = window.open("", "MsgWindow", "width=200,height=100  />");
  myWindow.document.write("<p > This pasword is:  " + password + " </p>  <botton> save <botton>");
  if (myWindow.closed) {
    document.getElementById("msg").innerHTML = "i see your not stosfaied with your password, you can change it by pushing the botton again!";
  }
}

Answer 1

  

数字：3，字母：2，大写字母：1，（！@＃$％^＆*）：2

除了特殊字符外，数字，字母和大写字母还很容易生成，因为它们的字符代码是连续的。

const rules = [[3,[48,57]],[2,[97,122]],[1,[65,90]]]

创建一个规则数组，例如[3，[48,57]]请求在48和57的字符代码之间生成3个数字。

然后要做的就是在Array#reduce的规则上使用destructuring并将选定的字符代码转换为字符。

const res = rules.reduce((a,[b,[c,d]])=>{
    for(let i = 0; i < b; i++){
      a.push(String.fromCharCode(r(d,c)));
    }
    return a;
  }, []);

特殊字符需要手动计算，因为字符代码之间没有图案。

  const specials = "!@#$%^&*";
  for(let i = 0; i < 2; i++){
    res.push(specials[r(0,specials.length-1)])
  }
  return shuffle(res);

完整解决方案：

const specialChars = document.getElementById("s");
const numbers = document.getElementById("n");
const capitals = document.getElementById("c");
const letters = document.getElementById("l");
const button = document.getElementById("b");
const result = document.getElementById("res");

button.addEventListener("click", function(e) {
  const numberCount = numbers.value;
  const letterCount = letters.value;
  const capitalCount = capitals.value;
  const specialCount = specialChars.value;

  const rules = [
    [numberCount, [48, 57]],
    [letterCount, [97, 122]],
    [capitalCount, [65, 90]]
  ]

  result.value = genPass(rules, specialCount);

})


function r(min, max) {
  return Math.floor(Math.random() * (max + 1 - min) + min);
}

/**
 * Shuffles array in place. ES6 version
 * @param {Array} a items An array containing the items.
 */
function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

function genPass(rules, specialCount) {

  const res = rules.reduce((a, [b, [c, d]]) => {
    for (let i = 0; i < b; i++) {
      a.push(String.fromCharCode(r(d, c)));
    }
    return a;
  }, []);
  const specials = "!@#$%^&*";
  for (let i = 0; i < specialCount; i++) {
    res.push(specials[r(0, specials.length - 1)])
  }
  return shuffle(res).join("");
}

div {
  display: flex;
  flex-direction: column;
}

<div>
  <label for="n">Numbers</label>
  <input id="n" value="3" type="number" placeHolder="Numbers">
</div>
<div>
  <label for="l">Letters</label>
  <input id="l" value="3" type="number" placeHolder="Letters">
</div>
<div>
  <label for="c">Capital</label>
  <input id="c" value="3" type="number" placeHolder="Capital Letters">
</div>
<div>
  <label for="s">Specials</label>
  <input id="s" value="3" type="number" placeHolder="Specials">
</div>

<button id="b">Generate</button>
<input id="res" type="text" disabled>

随机播放方法从此处获取：https://stackoverflow.com/a/6274381/3589092

Answer 2

您需要将输入解析为整数。否则，+是串联的，因此，如果输入3、2、1，它将尝试创建一个321个字符的密码，但只有3位数字，2个字母和1个小写字母。循环将永远不会结束。

由于firstletter +=之前没有值要附加到firstletter =，因此您正在使用firstletter。

您还应该将password和firstletter声明为局部变量。

您不需要i变量。您只需测试while (overall > 0)。

function myFunction() {
  var n = parseInt(document.getElementById("myText").value, 10);
  var l = parseInt(document.getElementById("myletter").value, 10);
  var cl = parseInt(document.getElementById("mycapitalletter").value, 10);
  var overall = cl + l + n
  var ran, firstletter;
  var password = ""

  /*here is the javascript method *not working* */
  while (overall > 0) {
    ran = Math.floor(Math.random() * 3);
    if (ran == 2 && cl != 0) {
      var choice = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      firstletter = choice.charAt(Math.floor(Math.random() * choice.length));
      password = password + "" + firstletter;
      overall--;
      cl--;
    } else if (ran == 1 && l != 0) {

      var choice = "abcdefghijklmnopqrstuvwxyz";
      firstletter = choice.charAt(Math.floor(Math.random() * choice.length));
      password = password + "" + firstletter;
      overall--;
      l--;
    } else if (ran == 0 && n != 0) {
      firstletter = Math.floor(Math.random() * 10);
      password = password + "" + firstletter;
      overall--;
      n--;
    }
  }

  console.log(password);
}

Digits: <input type="number" id="myText">
<br> Letters: <input type="number" id="myletter">
<br> Capitals: <input type="number" id="mycapitalletter">
<br>
<button onclick="myFunction()">Submit</button>