mgulyaev · March 3, 2013 06:39
diff --git a/mixer.html b/mixer.html
 <!doctype html>
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" media="screen">
    <title>Letter mixer</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
        var mix = function(wordsToMix, oldWords, mixedWords) {
            if (wordsToMix.length < oldWords.length) {
                oldWords = oldWords.slice(0, wordsToMix.length - 1)
                mixedWords = mixedWords.slice(0, wordsToMix.length - 1)
            }
            for (var i in wordsToMix) {
                if (wordsToMix[i] == oldWords[i]) continue
                var subWords = wordsToMix[i].split('-')
                if (subWords.length > 1) {
                    mixedWords[i] = mix(subWords, [], []).join('-')
                    continue
                }
                var letters = wordsToMix[i].split('')
                var first = letters.length + 1, last = 0
                for (var j = letters.length - 1; j >= 0 && last == 0; j--) 
                    last = (/[а-яА-ЯёЁa-zA-Z]/.test(letters[j])) ? j - 1: 0
                for (var j = 0; j < letters.length && first == letters.length + 1; j++) 
                    first = (/[а-яА-ЯёЁa-zA-Z]/.test(letters[j])) ? j + 1 : letters.length + 1

                while (last - first > 0) {
                    var pos1, pos2
                    do {
                        pos1 = Math.floor(Math.random() * (last - first + 1)) + first
                        pos2 = Math.floor(Math.random() * (last - first + 1)) + first
                    } while (pos1 == pos2)
                    var t = letters[pos1]
                    letters[pos1] = letters[pos2]
                    letters[pos2] = t
                    first++
                }
                mixedWords[i] = letters.join('')
            }
            return mixedWords
        }
        var wordsToMix = [], oldWords = [], mixedWords = []
        $('document').ready(function() {
            $('#after').attr('placeholder', mix($('#before').attr('placeholder').split(' '), [], []).join(' '))

            $('#before').keyup(function() {
                wordsToMix = $('#before').val().split(' ')
                mixedWords = mix(wordsToMix, oldWords, mixedWords)
                oldWords = wordsToMix
                $('#after').html(mixedWords.join(' '))
            })
            $('#after').click(function() {
                $(this).select()
            })
        })
    </script>
 </head>
 <body>
    <div class="hero-unit">
        <h1>Letter mixer</h1>
        <p>Look what an amazing thing can do your brain</p>
    </div>
    <div class="container">
        <div class="row">
            <blockquote class="pull-right span8">
                <p>It deosn’t mttaer in waht oredr the ltteers in a wrod are, 
                    the olny iprmoatnt tihng is taht the frist and lsat ltteer are in the rghit pcale.</p>
            </blockquote>
        </div>
        <h1>You can check it</h1>
        <form action="#">
            <label for="before">Just type your text here</label>
            <textarea class="input-xxlarge" name="before" id="before" cols="50" rows="5" placeholder="Your text here"></textarea>
            <label for="after">And get the mixed one!</label>
            <textarea class="input-xxlarge" name="after" id="after" cols="50" rows="5"></textarea>
        </form>
    </div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" media="screen">
	<title>Letter mixer</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript">

	var mix = function(wordsToMix, oldWords, mixedWords) {
	if (wordsToMix.length < oldWords.length) {
	oldWords = oldWords.slice(0, wordsToMix.length - 1)
	mixedWords = mixedWords.slice(0, wordsToMix.length - 1)
	}
	for (var i in wordsToMix) {
	if (wordsToMix[i] == oldWords[i]) continue
	var subWords = wordsToMix[i].split('-')
	if (subWords.length > 1) {
	mixedWords[i] = mix(subWords, [], []).join('-')
	continue
	}
	var letters = wordsToMix[i].split('')
	var first = letters.length + 1, last = 0
	for (var j = letters.length - 1; j >= 0 && last == 0; j--)
	last = (/[а-яА-ЯёЁa-zA-Z]/.test(letters[j])) ? j - 1: 0
	for (var j = 0; j < letters.length && first == letters.length + 1; j++)
	first = (/[а-яА-ЯёЁa-zA-Z]/.test(letters[j])) ? j + 1 : letters.length + 1

	while (last - first > 0) {
	var pos1, pos2
	do {
	pos1 = Math.floor(Math.random() * (last - first + 1)) + first
	pos2 = Math.floor(Math.random() * (last - first + 1)) + first
	} while (pos1 == pos2)
	var t = letters[pos1]
	letters[pos1] = letters[pos2]
	letters[pos2] = t
	first++
	}
	mixedWords[i] = letters.join('')
	}
	return mixedWords
	}
	var wordsToMix = [], oldWords = [], mixedWords = []
	$('document').ready(function() {
	$('#after').attr('placeholder', mix($('#before').attr('placeholder').split(' '), [], []).join(' '))

	$('#before').keyup(function() {
	wordsToMix = $('#before').val().split(' ')
	mixedWords = mix(wordsToMix, oldWords, mixedWords)
	oldWords = wordsToMix
	$('#after').html(mixedWords.join(' '))
	})
	$('#after').click(function() {
	$(this).select()
	})
	})
	</script>
	</head>
	<body>
	<div class="hero-unit">
	<h1>Letter mixer</h1>
	<p>Look what an amazing thing can do your brain</p>
	</div>
	<div class="container">
	<div class="row">
	<blockquote class="pull-right span8">
	<p>It deosn’t mttaer in waht oredr the ltteers in a wrod are,
	the olny iprmoatnt tihng is taht the frist and lsat ltteer are in the rghit pcale.</p>
	</blockquote>
	</div>
	<h1>You can check it</h1>
	<form action="#">
	<label for="before">Just type your text here</label>
	<textarea class="input-xxlarge" name="before" id="before" cols="50" rows="5" placeholder="Your text here"></textarea>
	<label for="after">And get the mixed one!</label>
	<textarea class="input-xxlarge" name="after" id="after" cols="50" rows="5"></textarea>
	</form>
	</div>
	</body>
	</html>