JavaScript function to convert UTF8 string between fullwidth and halfwidth forms

Question

EDIT: Thanks to GOTO 0, I now know exactly what I my question is called.

I need a JavaScript function to convert from UTF-8 fullwidth form to halfwidth form.

Solution 1

Try this

function toASCII(chars) {
    var ascii = '';
    for(var i=0, l=chars.length; i<l; i++) {
        var c = chars[i].charCodeAt(0);

        // make sure we only convert half-full width char
        if (c >= 0xFF00 && c <= 0xFFEF) {
           c = 0xFF & (c + 0x20);
        }

        ascii += String.fromCharCode(c);
    }

    return ascii;
}

// example
toASCII("ＡＢＣ"); // returns 'ABC' 0x41

Solution 2

Apperently, you want to convert halfwidth and fullwidth form characters to their equivalent basic latin forms. If this is correct, you can do a replacement using a regular expression. Something like this should work:

var x = "！ａｂｃ　ＡＢＣ！";
var y = x.replace(
    /[\uff01-\uff5e]/g,
    function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xfee0); }
    );

Where x is your input string and y is the output.

Solution 3

Year 2018 answer

Many years later – and it’s still impossible to find on the Internet a function that does this. So I wrote mine. (Nearly learned Japanese and Korean to get to this point.)

Simple version

Latin range only.

var shiftCharCode = Δ => c => String.fromCharCode(c.charCodeAt(0) + Δ);
var toFullWidth = str => str.replace(/[!-~]/g, shiftCharCode(0xFEE0));
var toHalfWidth = str => str.replace(/[！-～]/g, shiftCharCode(-0xFEE0));

Complete version

Let me know if I missed any character.

(function () {
    let charsets = {
        latin: {halfRE: /[!-~]/g, fullRE: /[！-～]/g, delta: 0xFEE0},
        hangul1: {halfRE: /[ﾡ-ﾾ]/g, fullRE: /[ᆨ-ᇂ]/g, delta: -0xEDF9},
        hangul2: {halfRE: /[ￂ-ￜ]/g, fullRE: /[ᅡ-ᅵ]/g, delta: -0xEE61},
        kana: {delta: 0,
            half: "｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ", 
            full: "。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシ" + 
                "スセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン゛゜"},
        extras: {delta: 0,
            half: "¢£¬¯¦¥₩\u0020|←↑→↓■°", 
            full: "￠￡￢￣￤￥￦\u3000￨￩￪￫￬￭￮"}
    };
    let toFull = set => c => set.delta ? 
        String.fromCharCode(c.charCodeAt(0) + set.delta) : 
        [...set.full][[...set.half].indexOf(c)];
    let toHalf = set => c => set.delta ? 
        String.fromCharCode(c.charCodeAt(0) - set.delta) : 
        [...set.half][[...set.full].indexOf(c)];
    let re = (set, way) => set[way + "RE"] || new RegExp("[" + set[way] + "]", "g");
    let sets = Object.keys(charsets).map(i => charsets[i]);
    window.toFullWidth = str0 => 
        sets.reduce((str,set) => str.replace(re(set, "half"), toFull(set)), str0);
    window.toHalfWidth = str0 => 
        sets.reduce((str,set) => str.replace(re(set, "full"), toHalf(set)), str0);
})();

/* Example starts here: */
var set = prompt("Enter a couple of comma-separated strings (half or full-width):", 
    ["aouäöü123", "'\"?:", "¢£¥₩↑→", "ｺﾝﾆﾁﾊ", "ﾡﾢￂￃ"].join()).split(",");
var steps = [set, set.map(toFullWidth), set.map(toFullWidth).map(toHalfWidth)];
var tdHTML = str => `<td>${str}</td>`;
var stepsHTML = steps.map(step => step.map(tdHTML).join(""));
var rows = document.getElementsByTagName("tr");
[...rows].forEach((row,i) => row.insertAdjacentHTML("beforeEnd", stepsHTML[i]));

th, td {border: 1px solid lightgrey; padding: 0.2em;}
th {text-align: left;}
table {border-collapse: collapse;}

<table>
    <tr><th scope="row">Input:</th></tr>
    <tr><th scope="row">Full-width:</th></tr>
    <tr><th scope="row">Half-width:</th></tr>
</table>

Solution 4

The answer of GOTO 0 is very useful, but I also need convert space from fullwidth to halfwidth.

So below is my code:

const halfwidthValue = value
      .replace(/[\uff01-\uff5e]/g, fullwidthChar => String.fromCharCode(fullwidthChar.charCodeAt(0) - 0xfee0))
      .replace(/\u3000/g, '\u0020');

Solution 5

The given solutions do not work for all the cases of Full-Width to Half-Width conversion of Kana (eg. デジタル　is not converted properly). I have made a function for converting Zenkaku to Hankaku Katakana, Hope it helps.

function convertToHalfWidth(string) {
  let characters = getCharacters(string);
  let halfWidthString = ''
  characters.forEach(character => {
    halfWidthString += mapToHankaku(character);
  });
  return halfWidthString;
}

function getCharacters(string) {
   return string.split("");
}

function mapToHankaku(character) {
  let zenHanMap = getZenkakuToHankakuMap();
  if (typeof zenHanMap[character] === 'undefined') {
    return character;
  } else {
    return zenHanMap[character];
  }
}

function getZenkakuToHankakuMap() {
  let zenHanMap = {
    'ァ': 'ｧ',
    'ア': 'ｱ',
    'ィ': 'ｨ',
    'イ': 'ｲ',
    'ゥ': 'ｩ',
    'ウ': 'ｳ',
    'ェ': 'ｪ',
    'エ': 'ｴ',
    'ォ': 'ｫ',
    'オ': 'ｵ',
    'カ': 'ｶ',
    'ガ': 'ｶﾞ',
    'キ': 'ｷ',
    'ギ': 'ｷﾞ',
    'ク': 'ｸ',
    'グ': 'ｸﾞ',
    'ケ': 'ｹ',
    'ゲ': 'ｹﾞ',
    'コ': 'ｺ',
    'ゴ': 'ｺﾞ',
    'サ': 'ｻ',
    'ザ': 'ｻﾞ',
    'シ': 'ｼ',
    'ジ': 'ｼﾞ',
    'ス': 'ｽ',
    'ズ': 'ｽﾞ',
    'セ': 'ｾ',
    'ゼ': 'ｾﾞ',
    'ソ': 'ｿ',
    'ゾ': 'ｿﾞ',
    'タ': 'ﾀ',
    'ダ': 'ﾀﾞ',
    'チ': 'ﾁ',
    'ヂ': 'ﾁﾞ',
    'ッ': 'ｯ',
    'ツ': 'ﾂ',
    'ヅ': 'ﾂﾞ',
    'テ': 'ﾃ',
    'デ': 'ﾃﾞ',
    'ト': 'ﾄ',
    'ド': 'ﾄﾞ',
    'ナ': 'ﾅ',
    'ニ': 'ﾆ',
    'ヌ': 'ﾇ',
    'ネ': 'ﾈ',
    'ノ': 'ﾉ',
    'ハ': 'ﾊ',
    'バ': 'ﾊﾞ',
    'パ': 'ﾊﾟ',
    'ヒ': 'ﾋ',
    'ビ': 'ﾋﾞ',
    'ピ': 'ﾋﾟ',
    'フ': 'ﾌ',
    'ブ': 'ﾌﾞ',
    'プ': 'ﾌﾟ',
    'ヘ': 'ﾍ',
    'ベ': 'ﾍﾞ',
    'ペ': 'ﾍﾟ',
    'ホ': 'ﾎ',
    'ボ': 'ﾎﾞ',
    'ポ': 'ﾎﾟ',
    'マ': 'ﾏ',
    'ミ': 'ﾐ',
    'ム': 'ﾑ',
    'メ': 'ﾒ',
    'モ': 'ﾓ',
    'ャ': 'ｬ',
    'ヤ': 'ﾔ',
    'ュ': 'ｭ',
    'ユ': 'ﾕ',
    'ョ': 'ｮ',
    'ヨ': 'ﾖ',
    'ラ': 'ﾗ',
    'リ': 'ﾘ',
    'ル': 'ﾙ',
    'レ': 'ﾚ',
    'ロ': 'ﾛ',
    'ヮ': '',
    'ワ': 'ﾜ',
    // 'ヰ': 'ﾞ  ﾟ',
    // 'ヱ': '',
    'ヲ': 'ｦ',
    'ン': 'ﾝ',
    'ヴ': 'ｳﾞ',
    // 'ヵ': '',
    // 'ヶ': '',
    // 'ヷ': '',
    // 'ヸ': '',
    // 'ヹ': '',
    // 'ヺ': '',
    '・': '･',
    'ー': 'ｰ',
    // 'ヽ': '',
    // 'ヾ': '',
    // 'ヿ': '',
  };
  return zenHanMap;
}

Use as follows convertToHalfWidth('デジタル');

You can pass the result of this function to the function mentioned by GOTO 0 and get the complete Half width result for the Japanese Language

Reference: https://en.wikipedia.org/wiki/Katakana#Unicode

View more solutions