Introduction
In this blog, we will discuss how to create a Random String using jquery that will generate a variety of random strings.
- Create a function in Jquery as random().
- Now, we’ll create a random index in the string using the Math.random() function.
- we must obtain the character’s string’s length and store it in a const variable called charactersLength.
- We can now obtain the random number by using the charAt() method, which returns the character located at the provided index in a string.
- The Math.random() function returns a decimal value, between 0 and 1, and we must round it to an integer value.
– Generating Random characters: –
We will use a for loop to generate n(length) number of characters and append those to the string. The loop will run from 0 till length -1 as the index value start from 0.
Now, we’ll create a random index in the string using the Math.random() function.
Prior to that, we must obtain the “characters” string’s length and store it in a let variable called”charactersLength.”
This will reveal the “charactersLength” string’s length, which is 26. We can now obtain the random number by
using the charAt() method, which returns the character located at the provided index in a string.
as a result, by employing characters. The character at that specific index can be obtained using the charAt() function. At the conclusion of the loop, we receive a string with random characters after adding it to the empty string “result.”
Example: The random number generation for the character length chosen in this example is described.
Code: –
<!DOCTYPE html>
<html>
<head>
<title>Generate Random String</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<linkrel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css”
integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<style>
html {
margin-top: 100px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
#example{
border: 1px solid;
border-radius: 5px;
width:400px;
padding: 30px;
margin-left: 30rem;
background-color:lightgray;
}
.btntxt{
margin: 20px;
justify-content: space-around;
}
.RndmString {
text-indent: 100px;
text-align: justify;
letter-spacing: 3px;
}
h5{
margin-bottom: 25px;
text-align: center;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div id=”example”>
<h5>Generate Random String</h5>
<div class=”input-group”>
<input type=”text” class=”form-control font-weight-bold RndmString”
value=”” id=”copy-input”>
<span class=”input-group-btn”>
<button class=”btn btn-default chngtxt” type=”button” id=”copy-button”
data-toggle=”tooltip” data-placement=”button”
title=”Copy to Clipboard” onclick=”copyToClipboard()”>
Copy
</button>
</span>
</div>
<div class=”row btntxt”>
<div class=”align-self-start mr-auto”>
<button class=”btn btn-success” id=”btn_click” onclick=”CreateRandomString()”>Generate String</button>
</div>
<div class=”align-self-center ml-auto”>
<button class=”btn btn-primary rstString”>Reset</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
//Clear input text
$(“.rstString”).click(function() {
$(“.RndmString”).val(”);
$(‘.chngtxt’).html(“Copy”);
});
});
//Generate random string function
function CreateRandomString()
{
let result = ‘ ‘;
for(let i = 0; i < 7; i++)
{
result += String.fromCharCode(65 + Math.floor(Math.random() * 26));
}
$(‘.RndmString’).val(result);
$(‘.chngtxt’).html(“Copy”);
}
function copyToClipboard() {
let stringtext = $(“.RndmString”).val();
if(stringtext != “”)
{
var texttemp = $(“<input>”);
$(“body”).append(texttemp);
texttemp.val($(‘.RndmString’).val()).select();
document.execCommand(“copy”);
texttemp.remove();
$(‘.chngtxt’).html(“Copied!”);
}
}
</script>
</body>
</html>
Before : –
After :-
Conclusion
– This is how we can create a random String or character and use it in Jquery.
