SOURCE

function md5encode() {
  var str = $("#str").val()
  if (!str) {
    return Empty()
  }
  var m = CryptoJS.MD5(str) + ''
  $("#estr").val(m);
  $("#estr2").val(m.toUpperCase());
  
  $("#SHA256").val(CryptoJS.SHA256(str) + '')
  $("#RIPEMD160").val(CryptoJS.RIPEMD160(str) + '')
}

$(function () {
  $('#str').change(function () {
    md5encode()
  })
  $('#str').on('keyup', function () {
    md5encode()
  })
  
  
  $('#str2').on('keyup', function () {
    var str = $('#str2').val()
    $('#encodeURIComponent').val(encodeURIComponent(str))
    $('#decodeURIComponent').val(decodeURIComponent(str))
    $('#encodeURI').val(encodeURI(str))
    $('#decodeURI').val(decodeURI(str))
  })
  
  $('#str3').on('keyup', function () {
    var str = $('#str3').val()
    $('#base64Encode').val(base64Encode(str))
    $('#base64Decode').val(base64Decode(str))
  })
})

function randomString(length) {
  	var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}

function random() {
  var str = randomString(32)
  $('#str').val(str)
  md5encode()
}

function Empty() {
  document.getElementById('str').value = '';
  document.getElementById('estr').value = '';
  document.getElementById('estr2').value = '';
  document.getElementById('str').select();
  $('#SHA256').val('')
  $('#RIPEMD160').val('')
}

function GetFocus() {
  document.getElementById('str').focus();
}

function base64Encode (str) {
    var str = CryptoJS.enc.Utf8.parse(str);
    var base64 = CryptoJS.enc.Base64.stringify(str);
    return base64
}

function base64Decode (str) {
    var words = CryptoJS.enc.Base64.parse(str);
    var parseStr = words.toString(CryptoJS.enc.Utf8);
    return parseStr
}

<div class="panel panel-default">
  <div class="panel-heading">
<div class="media">
<div class="media-body">
<h4 class="media-heading">MD5/Sha加密</h4> 
</div>
</div>
</div>
  <div class="panel-body">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">
        文本
      </span>
      <input type="text" class="form-control" id="str" placeholder="文本"
      aria-describedby="basic-addon1">
    </div>
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        Md5(小写)
      </span>
      <input type="text" class="form-control" id="estr" placeholder="Md5(小写)"
      aria-describedby="basic-addon1">
    </div>
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        Md5(大写)
      </span>
      <input type="text" class="form-control" id="estr2" placeholder="Md5(大写)"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        SHA256
      </span>
      <input type="text" class="form-control" id="SHA256" placeholder="SHA256"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        RIPEMD160
      </span>
      <input type="text" class="form-control" id="RIPEMD160" placeholder="RIPEMD160"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="btn-group" role="group" aria-label="..." style="margin-top: 20px;">
     <!--  <button type="button" class="hide btn btn-primary" onclick="md5encode();">
        MD5加密
      </button> -->
      <button type="button" class="btn btn-primary" onclick="random();">
        随机字符串
      </button>
      <button type="button" class="btn btn-danger" onclick="Empty();">
        清空结果
      </button>
    </div>
  </div>
  <input type="hidden" id="encode" value="1" />
  
</div>

<div class="panel panel-default">
  <div class="panel-heading">
<div class="media">
<div class="media-body">
<h4 class="media-heading">URI Encode/Decode</h4> 
</div>
</div>
</div>
  <div class="panel-body">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">
        文本
      </span>
      <input type="text" class="form-control" id="str2" placeholder="文本"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        encodeURIComponent
      </span>
      <input type="text" class="form-control" id="encodeURIComponent" placeholder="encodeURIComponent"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        decodeURIComponent
      </span>
      <input type="text" class="form-control" id="decodeURIComponent" placeholder="decodeURIComponent"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        encodeURI
      </span>
      <input type="text" class="form-control" id="encodeURI" placeholder="encodeURI"
      aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        decodeURI
      </span>
      <input type="text" class="form-control" id="decodeURI" placeholder="decodeURI"
      aria-describedby="basic-addon1">
    </div>
</div>

  
<div class="panel panel-default">
  <div class="panel-heading">
<div class="media">
<div class="media-body">
<h4 class="media-heading">Base64 Encode/Decode</h4> 
</div>
</div>
</div>
  <div class="panel-body">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">
        文本
      </span>
      <textarea type="text" class="form-control" id="str3" placeholder="文本"
                aria-describedby="basic-addon1"></textarea>
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        base64Encode
      </span>
      <textarea type="text" class="form-control" id="base64Encode" placeholder="base64Encode"
                aria-describedby="basic-addon1"></textarea>
    </div>
    
    <div class="input-group" style="margin-top: 20px;">
      <span class="input-group-addon" id="basic-addon1">
        base64Decode
      </span>
      <textarea type="text" class="form-control" id="base64Decode" placeholder="base64Decode"
                aria-describedby="basic-addon1"></textarea>
    </div>
    
    
</div>