Random String Generator using JavaScript

Last Updated : 28 Jun, 2025

A Random String Generator is a small program that creates a string (a set of characters) made up of random letters, numbers, and/or symbols. These random strings are useful in many places like:

Creating temporary passwords
Generating unique IDs
Making test data
Creating captcha codes

Approaches to Generate Random String

Below are two main methods that can be used to generate random string

1. Generating the random string from the specified length of the character set:

This method involves generating a random string of a user-defined length using characters from a predefined set. We use basic JavaScript functions along with DOM manipulation to make it interactive.

How it Works

Math.random() generates a random decimal between 0 and 1.
Multiplying it by charactersLength gives a number between 0 and (charactersLength - 1).
Math.floor() ensures the index is a whole number.
charAt(index) picks the character at the randomly generated index.
The character is appended to the result string.

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f4f8;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60px;
        }

        h2 {
            color: #333;
            margin-bottom: 10px;
        }

        #target {
            font-size: 24px;
            color: #007bff;
            margin: 20px 0;
            height: 30px;
        }

        input[type="number"] {
            padding: 10px;
            width: 80px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-right: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .container {
            background-color: white;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Random String Generator</h2>
        <h4 id="target"></h4>
        <input id="strlength" type="number" value="5" min="1" max="100" />
        <button id="gen" onClick="generate()">Generate</button>
    </div>
    <script>
        function generate() {
            let length = document.getElementById("strlength").value;
            const characters = 'abcdefghijklmnopqrstuvwxyz';
            let result = '';
            const charactersLength = characters.length;
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            document.getElementById("target").innerText = result;
        }
    </script>
</body>
</html>

Output

random-string-generator — Random String Generator

2. Generate Random String using String.fromCharCode()

This method creates a random string using character codes (UTF-16) with the help of JavaScript’s String.fromCharCode() function.

How It Works

Math.random() generates a decimal between 0 and 1.
Multiplying it by 26 gives a range from 0 to just under 26.
Math.floor() rounds it down to the nearest whole number (0–25).
Adding 97 shifts the range to ASCII values for 'a' to 'z'.
String.fromCharCode() converts the ASCII code to its character.

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            background: #ffffff;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            text-align: center;
            max-width: 400px;
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
        }

        #target {
            font-size: 1.2rem;
            color: #007acc;
            margin-bottom: 20px;
            font-weight: bold;
        }

        input[type="number"] {
            padding: 8px 12px;
            font-size: 16px;
            width: 80px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }

        button {
            padding: 10px 20px;
            background-color: #007acc;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background-color: #005fa3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Random String Generator</h2>
        <h4 id="target"></h4>
        <input id="strlength" type="number" value="5" min="1" max="100" />
        <button id="gen" onclick="generate()">Generate</button>
    </div>
    <script>
        function generate() {
            let length = document.getElementById("strlength").value;
            let result = '';
            for (let i = 0; i < length; i++) {
                result += String.fromCharCode(97 + Math.floor(Math.random() * 26));
            }
            document.getElementById("target").innerHTML = result;
        }
    </script>
</body>
</html>