JSFiddle - React, Tailwind, and code Playground

by Alex Milenin

HTML

<body>
  <input type="text" id="input" placeholder="Enter some title" autofocus>
  <div id="out"></div>
</body>

CSS

body{ padding: 10px }
input{ width: 100% }
div{ min-width:100%; margin: 20px 0 0 0; border: 1px dotted #ccc; }

JavaScript

var toTranslit = function(text) {
  return text.replace(/([а-яё])|([\s_-])|([^a-z\d])/gi,
    function(all, ch, space, words, i) {
      if (space || words) {
        return space ? '-' : '';
      }
      var code = ch.charCodeAt(0),
        index = code == 1025 || code == 1105 ? 0 :
        code > 1071 ? code - 1071 : code - 1039,
        t = ['yo', 'a', 'b', 'v', 'g', 'd', 'e', 'zh',
          'z', 'i', 'y', 'k', 'l', 'm', 'n', 'o', 'p',
          'r', 's', 't', 'u', 'f', 'h', 'c', 'ch', 'sh',
          'shch', '', 'y', '', 'e', 'yu', 'ya'
        ];
      return t[index];
    }).toLowerCase();
};


$(document).ready(function() {
  $("#input").on("keyup", function() {
    $("#out").text(toTranslit($("#input").val()));
  });
});