[Malleys]

<script>
"use strict";
//************************************
// эта функция переводит число из одной в другую систему счисления

function convert(number, fromBase, toBase) {
  return fromDec(toDec(number, fromBase), toBase);
}
function toDec(number, fromBase) {
  var result = 0;
  number = number.toString().toLowerCase().split('');
  for(var index = 0, length = number.length, digit; index < length; index++) {
    digit = prepareDigit(number[index]);
    result = result * fromBase + digit;
  }
  return result;
}
function fromDec(number, toBase) {
  var result = [], integerPart, digit;
  while(number >= 1) {
    integerPart = parseInt(number/toBase);
    digit = number - toBase * integerPart;
    if(digit >= 10)
      digit = String.fromCharCode(digit + 87);
    result.unshift(digit);
    number = integerPart;
  }

  return result.join('');
}
function prepareDigit(digit) {
  digit = digit.charCodeAt() - 48;
  if(digit > 48)
    digit -= 39;
  return digit;
}

//**********************************

function onClick(q) {
  var BASES = {
    'bin': '2',
    'oct': '8',
    'dec': '10',
    'hex': '16' 
  };
  var PATTERN = /([\dabcdef]+)(?:\s*(?:from|из|\s)(?:\s*base)?\s*(\d+|bin|oct|dec|hex))?\s*(?:(?:to|в)(?:\s*base)?\s*(\d+|bin|oct|dec|hex))?/;
  var PATTERN_BASE = /bin|oct|dec|hex/;
  var value = document.getElementById('inpution').value || q || '';
  var match = value.match(PATTERN);
  var number = match && match[1] || '0';
  var from = match && match[2];
  var to = match && match[3];

  if(PATTERN_BASE.test(from)) {
    from = BASES[from];
  }

  if(PATTERN_BASE.test(to)) {
    to = BASES[to];
  }

  from = +from || 10;
  to = +to || 10;
  var result = convert(number, from , to);
  document.getElementById('result').innerHTML = 'convert <span class="hightlight">' + number.toUpperCase() + '<sub>' + (from == 10 ? '' : from) + '</sub></span> to <span class="hightlight">base ' + to + '</span> = ' + result.toUpperCase() + '<sub>' + (to == 10 ? '' : to)  + '</sub>';
}
  
function example(q) {
  document.getElementById('inpution').value = q;
  onClick();
}
</script>
<style>
#result, #examples {font-family: monospace; font-size: 18px; color: #aaa; }
#examples a:link, #examples a:visited {text-decoration: none; display: block; font-size: 14px; }
#examples a:hover, #examples a:focus {text-decoration: underline; }
#result .hightlight {color: #000; }
#result sub {font-size: 12px; }
#examples {float: left; margin-left: 20px; }
#examples .description {font-size: 12px; }
</style>
<div style="float: left; ">
  <input id="inpution" type="text" value="125 base 10 to base 2" />
  <input id="button" type="button" value="=" onclick="onClick(); " />
  <div id="result"></div>
</div>
<div id="examples">
  <span>Примеры</span>
  <div class="description">Из десятичной в другую систему счисления</div>
  <a href="#" onclick="example('147 to base 2');">147 to base 2</a>
  <a href="#" onclick="example('1025 to base 5');">1025 to base 5</a>
  <a href="#" onclick="example('255 to base 16');">255 to base 16</a>
  <div class="description">Из данной в 10-ую систему счисления</div>
  <a href="#" onclick="example('1000101011 base 2');">1000101011 base 2</a>
  <a href="#" onclick="example('fff base 16');">fff base 16</a>
  <div class="description">Из одной в другую систему счисления</div>
  <a href="#" onclick="example('1424 base 5 to base 12');">1424 base 5 to base 12</a>
</div>