JavaScript 生成随机字符串

有时候，程序员需要创建一个由随机字符选择生成的字符串。随机字符串生成器可以通过随机选择一些字符来创建一个随机字符串。这个字符串可以是一个简单的字符字符串或者是一个包含字母和数字的字符串。

在本章中，您将学习到创建随机字符串生成器的不同方法。我们将使用JavaScript编程语言来创建一个随机字符串生成器程序，每次运行时都会生成一个新的字符串。为此，我们将使用JavaScript的Math.random()函数。

随机字符串生成器的用途

大多数时候，您在网络表单中看到的验证码代码，需要在提交表单之前输入以验证用户是否是机器人。随机字符串生成器可以帮助您为程序员创建这种验证码代码。如今，它被广泛用于网络表单中的安全目的。

请记住，验证码代码包含一系列随机字符。它可以是字母字符或字母数字字符的组合。

在本章讨论的随机字符串生成器的类型

在本章中，我们将看到两种类型的随机字符串生成器：

生成简单随机字符串
生成随机字母数字字符串

我们有这两种类型的字符串生成器。在第一种类型的随机字符串生成器中，我们将创建一个 JavaScript 程序来生成仅包含字母的随机字符串。

另一方面，在第二种类型的字符串生成器中，我们将创建一个 JavaScript 程序来生成随机的字母数字字符串。请详细查看两种字符串生成器的示例：

生成随机字符串

下面，我们将创建一个用于生成随机字符串的程序：

方法 1

这种方法通过随机选择指定长度的一些字符来创建一个简单的随机字符串，而不是一个字母数字字符串。按照以下步骤进行：

创建一个用户定义的函数并定义一个变量，其中包含所有英文字母的大小写。
定义要生成的新随机字符串的长度。
声明一个新的空变量（var randomstring = ”;）来保存生成的字符串。
现在，使用for循环遍历字符串。它将在每次迭代时生成一个新字符。
在此循环内部，使用 JavaScript 的 Math.random() 方法从上述指定的字符串变量（A-Z，a-z）中生成一个随机字符，方法是通过计算一个随机索引。
使用Math.floor()方法对值进行舍入。这将被用作Math.floor(Math.random() * characters.length)。

将上述步骤转换为实际的代码实现，以查看结果。请查看下面的 JavaScript 代码：

<html>
<head> 
<title> Random String Generator </title>
</head>

<script>
function randomString() {
            //define a variable consisting alphabets in small and capital letter
    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

            //specify the length for the new string
    var lenString = 7;
    var randomstring = '';

            //loop to select a new character in each iteration
    for (var i=0; i<lenString; i++) {
        var rnum = Math.floor(Math.random() * characters.length);
        randomstring += characters.substring(rnum, rnum+1);
    }

             //display the generated string 
    document.getElementById("randomfield").innerHTML = randomstring;
}
</script>

<body>
<center>
<h2 style="color: green"> Random String Generator </h2>
<h3> Click the button to generate a random string </h3>

<form name="randomform">
<input type="button" value="Generate Random String" onClick="randomString();">
<br><br>
<b><p id="randomfield" style="color: green"> </p></b>
</form>

</center>
</body>
</html>

在浏览器中运行代码，并得到与下方截图中给出的结果相同：

输出1

JavaScript 生成随机字符串

输出2

点击此处 生成随机字符串 按钮，它将为您生成一个随机字符串。

JavaScript 生成随机字符串

输出3

每当你点击这个按钮，它将生成一个长度为7的新随机字符模式（随机字符串）。请参见下面的截图：

JavaScript 生成随机字符串

生成随机字母数字字符串

下面讨论了两种方法来生成一个随机的字母数字字符串：

方法1

该方法将创建一个指定长度的随机字母数字字符串。按照以下步骤操作：

创建一个用户定义的函数，该函数将包含下面的所有步骤。
定义一个变量，其中包含所有小写字母、大写字母和从0到9的数字，例如 var alphaNumChars = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz”;。
定义要生成的新随机字符串的长度。
声明一个新的空变量 (var randomstring = ”;) 以保存新生成的字符串。
现在，使用 for 循环遍历字符串。它将在每次迭代中生成一个新的字符。
在此循环内部，使用 JavaScript 的 Math.random() 方法从上述指定的字符串变量 (A-Z, a-z) 中选择一个随机字符，方法是计算一个随机索引。
使用 floor() 方法来四舍五入值。这将被用作 Math.floor(Math.random() * characters.length)。

将上述步骤转换为实际的代码实现以查看结果。看一下下面的 JavaScript 代码：

<html>
<head> 
<title> Random String Generator </title>
</head>

<script>
function randomString() {
            //initialize a variable having alpha-numeric characters
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

            //specify the length for the new string to be generated
    var string_length = 8;
    var randomstring = '';

            //put a loop to select a character randomly in each iteration
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
             //display the generated string 
    document.getElementById("randomfield").innerHTML = randomstring;
}
</script>

<body>
<center>
<h2 style="color: green"> Random String Generator </h2>
<h3> Click the button to generate a random alpha-numeric string </h3>

<form name="randform">
<input type="button" value="Generate Alpha-numeric String" onClick="randomString();">
<br><br>
<h4 id="randomfield" style="color: green"> </h4>
</form>
</center>
</body>
</html>

在浏览器中运行代码，得到与下面截图中给出的结果相同：

输出1

JavaScript 生成随机字符串

输出2

点击此 生成随机字符串 按钮，它将为您生成一个随机字符串。

JavaScript 生成随机字符串

输出3

每次点击该按钮时，它都会为您生成一个新的随机字符（随机字符串）序列。请参见下面的截图：

JavaScript 生成随机字符串

方法2

现在，我们有另一种方法来生成指定长度的字母数字字符串。这是一种非常简短的方法来生成随机字符串。它不需要太长的代码。在这种方法中，我们不会为新生成的字符串指定长度。它将采用长度为10或11的新字符串。

按照以下步骤创建一个随机的字母数字字符串：

创建一个用户定义的函数，其中包含以下所有步骤。
首先，使用 random() 方法生成一个随机数。
现在，我们将使用JavaScript的内置方法 toString(36) 将基数转换为36（26个字母+0到9的数字）。在这36个字符中，包括了字母和数字。
最后，使用 slice() 获取从位置2开始的字符串部分。

将以上步骤转换为实际的代码实现以查看结果。请查看下面的JavaScript代码：

<html> 
<head> 
    <title> 
    Generate random alpha-numeric string using JavaScript 
    </title> 
</head> 

<body> 

<center>
<h2 style="color:green;"> Random String Generator  </h2> 

<h3> Click the button to generate random alpha-numeric string </h3>
<button onClick="random_String_Generator()"> Generate String </button> 

<p id="random_String" style="color: green; 
            font-size: 22px; font-weight: bold;"> </p> 

<script> 
    var result = document.getElementById('random_String'); 
    function random_String_Generator() { 
        result.innerHTML = Math.random().toString(36).slice(2); 
    } 
</script> 
</center>

</body> 
</html>

输出1

保存文件并在浏览器中运行上述代码。最初你将获得与下面的屏幕截图中给出的结果相同的结果：

JavaScript 生成随机字符串