Random Text On Mouseover And On Mouseleave Show The Real Text

I want a javascript function in which if i hover on text like 'ExampleText' ,it will generate some random character with same length of hover Text like '$45a%b8r5c7' and every time

Solution 1:

Try this

$('body').on('mouseenter', '.change', function(){
    $('.change').html(Math.random().toString(36).substring(7));
}).on('mouseleave', function(){
    $('.change').html('Example');
});

<divclass="change">Example</div>

Solution 2:

If you want to specify the generated characters, maybe you can use something like this:

https://jsfiddle.net/uk7xyapa/1/

Html:

<span id="originalText">ExampleText</span>
<span id="newText">ExampleText</span>

jQuery:

$(document).ready(function(){
    var originalText = $( "#originalText" ).text();
    $( "#originalText" ).mouseenter(function() {
        var text = '';
        var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%$';

        for(var i=0; i < $( "#originalText" ).text().length; i++)
        {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        $( "#newText" ).text( text );
    });
    $( "#originalText" ).mouseleave(function() {
        $( "#newText" ).text( originalText );
    });
})