1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:59 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

JavaScript Text Scrambler

         

cookiemonster

10:16 pm on Dec 28, 2009 (gmt 0)

10+ Year Member



I want to make a JavaScript that randomly scrambles any text that the user types in a text box.
Any easy ways to do this?

Thanks.

Fotiman

3:17 pm on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's a function that takes a string and scrambles it. It works by fetching random characters from the string and then removing that character from the source string: 


/**
 * Scramble a string
 * @param str {String} The source string to scramble
 * @return {String} The scrambled version of the string
 */
function scramble(str) {
  var scrambled = '',
    randomNum;
  while (str.length > 1) {
    randomNum = Math.floor(Math.random() * str.length); 
    scrambled += str.charAt(randomNum);
    if (randomNum == 0) {
      str = str.substr(randomNum + 1);
    }
    else if (randomNum == (str.length - 1)) {
      str = str.substring(0, str.length - 1);
    }
    else {
      str = str.substring(0, randomNum) + str.substring(randomNum + 1);
    }
  }
  scrambled += str;
  return scrambled;
}

birdbrain

3:46 pm on Dec 29, 2009 (gmt 0)



Hi there cookiemonster,

and here is my little attempt at solving your problem... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
 font-size:1em;
 }
div {
 width:340px;
 padding:0;
 margin:auto;
 }
label {
 width:160px;
 margin:4px;
 float:left;
 clear:both;
 }
input {
 width:150px;
 margin:4px;
 float:left;
 }
h1 {
 color:#f00;
 text-align:center;
 }
</style>
<script type="text/javascript">
 
function shuffleStuff(){
 ary=[];
 df=document.forms[0];
 df[0].focus();
df[1].onclick=function() {
 df[0].focus();
 }
df[0].onblur=function() {
 stuff=df[0].value;
for(c=0;c<stuff.length;c++) { 
 ary[c]=stuff.charAt(c);
 } 
 df[0].value='';
while(ary.length>0) {
 idx=Math.floor(Math.random()*ary.length);
 df[0].value+=ary[idx];
 ary.splice(idx,1);
 }
 }
 }
if(window.addEventListener){
 window.addEventListener('load',shuffleStuff,false);
 }
else { 
if(window.attachEvent){
 window.attachEvent('onload',shuffleStuff);
 }
 }
</script>
</head>
<body>
<form action="#">
<h1>stuff will be scrambled on blur - ( hopefully ! )</h1>
<div>
<label>put stuff in here : </label><input type="text">
</div><div>
<input type="reset" value="remove stuff">
</div>
</form>
</body>
</html>

birdbrain

cookiemonster

8:27 pm on Dec 29, 2009 (gmt 0)

10+ Year Member



Thank you Fotiman and BirdBrain ...

I am now using BirdBrain's script (slightly modified).
I just have one issue with this script though - I want it to write the scrambled text to another <div> instead of in the text box.

Here's the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"> 
function shuffleStuff(){
ary=[]; 
df=document.forms[0]; 
df[0].focus();
var btn = document.getElementById('scramble');
df[1].onclick=function() { 
df[0].focus(); 
}
btn.onclick=function() { 
stuff=df[0].value; 
for(c=0;c<stuff.length;c++) { 
ary[c]=stuff.charAt(c); 
} 
df[0].value=''; 
while(ary.length>0) { 
idx=Math.floor(Math.random()*ary.length); 
df[0].value+=ary[idx]; 
ary.splice(idx,1);
} 
} 
}
if(window.addEventListener){ 
window.addEventListener('load',shuffleStuff,false); 
} 
else { 
if(window.attachEvent){ 
window.attachEvent('onload',shuffleStuff);
} 
}
</script>
</head> 
<body>
<form action="#"> 
<h1>stuff will be scrambled onclick of button</h1> 
<div> 
<label>put stuff in here : </label><input type="text">
</div><div> 
<input type="button" value="submit" id="scramble"> 
</div> 
</form>
</body> 
</html>

Fotiman

9:00 pm on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's an example (using the method I included above): 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shuffle Example</title>
</head>
<body>
<form action="#">
<div>
<label for='userText'>Put stuff in here :</label>
<input id='userText'>
<input type='button' id='doScramble' value='Scramble'>
</div>
<div id='scrambled'></div>
</form>
<script type="text/javascript">
(function () {
/** 
 * Scramble a string 
 * @param str {String} The source string to scramble 
 * @return {String} The scrambled version of the string 
 */ 
function scramble(str) { 
  var scrambled = '', 
    randomNum; 
  while (str.length > 1) { 
    randomNum = Math.floor(Math.random() * str.length); 
    scrambled += str.charAt(randomNum); 
    if (randomNum == 0) { 
      str = str.substr(randomNum + 1); 
    } 
    else if (randomNum == (str.length - 1)) { 
      str = str.substring(0, str.length - 1); 
    } 
    else { 
      str = str.substring(0, randomNum) + str.substring(randomNum + 1); 
    } 
  } 
  scrambled += str; 
  return scrambled; 
} 
function getScrambled() {
  var src = document.getElementById('userText').value,
    scrambled = document.getElementById('scrambled');
  scrambled.innerHTML = scramble(src);
}
var doScramble = document.getElementById('doScramble');
doScramble.onclick = getScrambled;
})();
</script>
</body>
</html>

birdbrain

9:01 pm on Dec 29, 2009 (gmt 0)



Hi there cookiemonster,

this is the mother of my previous example. ;) 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
div {
 width:330px;
 padding:
 }
label {
 width:150px;
 margin:4px;
 float:left;
 clear:both;
 }
input {
 width:150px;
 margin:4px;
 float:left;
 }
</style>
<script type="text/javascript">
function shuffleStuff(){
 ary=[];
 df=document.forms[0];
df[2].onclick=function() {
 df[1].value='';
 stuff=df[0].value;
for(c=0;c<stuff.length;c++) { 
 ary[c]=stuff.charAt(c);
 } 
while(ary.length>0) {
 idx=Math.floor(Math.random()*ary.length);
 df[1].value+=ary[idx];
 ary.splice(idx,1);
 }
 }
 }
if(window.addEventListener){
 window.addEventListener('load',shuffleStuff,false);
 }
else { 
if(window.attachEvent){
 window.attachEvent('onload',shuffleStuff);
 }
 }
</script>
</head>
<body>
<form action="#">
<div>
<label>stuff : </label><input type="text">
<label>scrambled stuff : </label><input type="text">
</div><div>
<input type="button" value="scramble stuff">
<input type="reset" value="remove stuff">
</div>
</form>
</body>
</html>

birdbrain

cookiemonster

9:33 pm on Dec 29, 2009 (gmt 0)

10+ Year Member



Thank you so much for the quick and helpful responses!
I really appreciate it.

I am now using Fotiman's method, and I will change it up a bit to suit my purposes.
birdbrain, your way of doing things is also great, but it won't work for my purposes.

Thanks guys!

Fotiman

9:48 pm on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Note, there are parts of my example that are, shall we say, less than efficient. ;) In my example, I was doing some string concatenation each time a character was removed from the middle of the string. birdbrain's approach used an array and simply called the splice method, which should be more efficient. Here's an updated version of my example, using an array instead of a string for maintaining the source string: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shuffle Example</title>
</head>
<body>
<form action="#">
<div>
<label for='userText'>Put stuff in here :</label>
<input id='userText'>
<input type='button' id='doScramble' value='Scramble'>
</div>
<div id='scrambled'></div>
</form>
<script type="text/javascript">
(function () {
/** 
 * Scramble a string 
 * @param str {String} The source string to scramble 
 * @return {String} The scrambled version of the string 
 */ 
function scramble(str) { 
  var scrambled = '', 
    src = str.split(''),
    randomNum; 
  while (src.length > 1) { 
    randomNum = Math.floor(Math.random() * src.length); 
    scrambled += src[randomNum];
    src.splice(randomNum, 1); 
  } 
  scrambled += src[0]; 
  return scrambled; 
} 
function getScrambled() {
  var src = document.getElementById('userText').value,
    scrambled = document.getElementById('scrambled');
  scrambled.innerHTML = scramble(src);
}
var doScramble = document.getElementById('doScramble');
doScramble.onclick = getScrambled;
})();
</script>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:59 am May 14, 2026