Skip to content
Advertisement

How to convert from utf-8 encoding to windows-1251 while typing

I want to convert from utf-8 encoding to windows-1251 when the user enters text in the field

For example, the user enters: Äèíóàáó

I want to get: Aeioaao

I use a crutch of earth symbols, but I would like to find a normal method, I could not find anything working on the Internet.

What I use:

$(function(){
        $('#txt').on('keyup paste change', function(){ 
        var txt = $(this), val = txt.val();
        val = val.replace(/[u00c4]/g, 'A').replace(/[u00e8]/g, 'e').replace(/[u00ed]/g, 'i').replace(/[u00f3]/g, 'o').replace(/[u00e0]/g, 'a').replace(/[u00e1]/g, 'a').replace(/[u00e7]/g, 'c');
        txt.val(val);
        })
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>paste: Äèíóàáó</p>
<input type="text" id="txt">

It helps me, because they use the same characters in the same way. But if it’s new, you need to add it.

Advertisement

Answer

You should normalize the string using NFKD and then use regex to remove the diacritic group of chars.

$(function() {
  $('#txt').on('keyup paste change', function() {
    var txt = $(this),
      val = txt.val();
    val = val
      .normalize("NFKD")
      .replace(/p{Diacritic}/gu, "")


    txt.val(val);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>paste: Äèíóàáó</p>
<input type="text" id="txt">

With support for exceptions

If you want to support exceptions, you can first change those to something unique, then remove the diacritics and then bring back the exceptions.

Something like

const accentExceptions = [
  { char: 'Ä', uuid: crypto.randomUUID() }, 
  { char: 'ä', uuid: crypto.randomUUID() },
// crypto.randomUUID is not supported by all browsers so you 
// might want to look for an alternative to creating some unique
// text/hash for each accented character
];

function encodeExceptions(value = '') {
  let encoded = value;
  accentExceptions.forEach(({ char, uuid }) => {
    encoded = encoded.replace(new RegExp(char, 'g'), uuid);
  });
  return encoded;
}

function decodeExceptions(value = '') {
  let decoded = value;
  accentExceptions.forEach(({ char, uuid }) => {
    decoded = decoded.replace(new RegExp(uuid, 'g'), char);
  });
  return decoded;
}

function removeDiacritics(value = '') {
  return value
    .normalize("NFKD")
    .replace(/p{Diacritic}/gu, "")
}

$(function() {
  $('#txt').on('keyup paste change', function() {
    var txt = $(this),
      val = txt.val();
    val = encodeExceptions(val);
    val = removeDiacritics(val);
    val = decodeExceptions(val);
    txt.val(val);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>paste: Äèíóàáó</p>
<input type="text" id="txt">
Advertisement