Random String Generator using JavaScript

Sometimes, programmers require to create a string which is generated by selecting the random characters. Random String Generator helps to create a random string by choosing some characters randomly. This string can be a simple character string or an alpha-numeric string.

In this chapter, you will get the different methods to create a random string generator. We will create a random string generator program using the JavaScript programming language to generate a random string. Each time it will generate a new string. For this, we will use the Math.random() function of JavaScript.

Use of Random String generator

Most of the time, you have seen the captcha code in web forms required to enter before submitting the form to verify the robot the users. Random String Generator will help you to create this Captcha code for the programmers. Nowadays, it is widely used in web forms for security purposes.

Remember that the Captcha code contains a sequence of random characters. It could be a combination of alphabetic characters or alpha-numeric characters.

Type of Random String Generators we discussed in this chapter

You will see two types of random string generator:

• Generate simple Random String
• Generate Random alpha-numeric String

We have these two types of string generator. In this first type of random string generator, we will create a JavaScript program of random string generator that will generate only the alphabetic string.

On the other end, in the second type of string generator, we will create a JavaScript program to generate random alpha-numeric strings. See the examples for both string generators in detail:

Generate a Random String

Here, we will create a program to generate a random string:

Approach 1:

This approach will create a simple random string by selecting some characters randomly with the specified length. This will be a simple string instead of an alpha-numeric string. Follow the steps below:

1. Create a user-defined function and define a variable having all English alphabets in small and capital letters.
2. Define the length for the new random string to be generated.
3. Declare a new empty variable (var randomstring = '';) to hold the generated string.
4. Now, traverse the string using for loop. It will generate a new character during each iteration.
5. Inside this loop, use Math.random() method of JavaScript to generate a random character from the above-specified string variable (A-Z, a-z) by calculating a random index.
6. floor() method to round off the value. This will be used as Math.floor(Math.random() * characters.length).

Convert the above steps in actual code implementation to see the result. Look at the JavaScript code below:

Copy Code

Run the code in your browser and get the result same as given in the below screenshot:

Output 1

Output 2

Click on this Generate Random String button, and this will generate a random string for you.

Output 3

Whenever you click this button, it will generate a pattern of new random characters (random string) of length 7. See the below screenshot:

Generate Random Alpha-Numeric String

There are two approaches discussed below to generate a random alpha-numeric string:

Approach 1:

This approach will create an alpha-numeric string having a specified length. Follow the below steps:

1. Create a user-defined function having that will consist of all the below steps inside it.
2. Define a variable having all alpha-numeric characters in small and capital letters and from 0-9, e.g., var alphaNumChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";.
3. Define the length for the new random string to be generated.
4. Declare a new empty variable (var randomstring = '';) to hold the newly generated string.
5. Now, traverse the string using for loop. It will generate a new character during each iteration.
6. Inside this loop, use Math.random() method of JavaScript to select a random character from the above-specified string variable (A-Z, a-z) by calculating a random index.
7. floor() method to round off the value. This will be used as Math.floor(Math.random() * characters.length).

Convert the above steps in actual code implementation to see the result. Look at the JavaScript code below:

Copy Code

Run the code in your browser and get the result same as given in the below screenshot:

Output 1

Output 2

Click on this Generate Random String button, and this will generate a random string for you.

Output 3

Every time when you click this button, it will generate a new sequence of random characters (random string) for you. See the below screenshot:

Approach 2:

Now, we have another approach will to generate an alpha-numeric string with the specified length. It is a very short approach to generate a random string. This does not require too much lengthy code. In this approach, we will not specify the length for the newly generated string. It will take length 10 or 11 of the new string.

Follow the basic steps to create a random alpha-numeric string:

1. Create a user-defined function having that will consists all the below steps inside it.
2. Firstly, use random() method to generate a random number.
3. Now, we will use the built-in method of JavaScript toString(36) to convert the base to 36 (26 chars + 0 to 9). In these 36 characters it has alpha-numeric characters includes 26 alphabets and 0 to 9 numbers.
4. Finally, use the slice() to get the part of string that is started from position 2.

Convert the above steps in actual code implementation to see the result. Look at the JavaScript code below:

Copy Code

Output 1

Save the file and run the above code in your browser. You will initially get the result same as given in the below screenshot:

Output 2

Here, click on the Generate String button to generate the random alpha-numeric string and see the output:

Output 3

It will generate a new pattern each time when you click this Generate String button. Click and check different alpha-numeric string patterns:

Note:

In approach 1, you can define the length (number of characters) for the new random string. But,

In approach 2, you cannot define the length of the new string to be generated. Use any of this approach in your website according to your requirement.