1

In JavaScript, you can get the word definition of the key that was pressed, by looking at event.code, such as:

document.onkeypress = function(event) {
  console.log(event.code);
};

When I press a, I get KeyA. When I press the arrow up key, I get ArrowUp. This is all fine for most keys, however, when I press a key like ½ on my keyboard with a Danish layout, I get Backquote, which is not correct.

Instead of grabbing the hardcoded value that JavaScript gives me, I thought about converting event.key instead, which returns the actual value of the keypress. For example, if I press SHIFT + 7 on my keyboard, event.key will return / which I want to be called slash (or forward slash).

Is there a way to convert a character to the actual word? I want an object/dictionary like this:

const keys = {
    '/': 'forward slash', //or slash
    'a': 'a',
    'space': 'Space',
    '"': 'Quotation mark',
    '\'': 'Apostrophe'
};

and so on. Then I can do:

document.onkeypress = function(event) {
  const characterPressed = keys[event.key];

  console.log(characterPressed);
};

Is there a list I can iterate through to grab each value, or do I have to go through every character possible to be typed on a keyboard, and then map them manually? I'm basically looking for a "character to word definition" scheme.

MortenMoulder
  • 6,138
  • 11
  • 60
  • 116
  • Here you are [http://unicode.org/Public/UNIDATA/UnicodeData.txt](http://unicode.org/Public/UNIDATA/UnicodeData.txt) – Ricky Mo Jan 25 '22 at 07:59
  • 1
    Does this answer your question? [Finding Unicode character name with Javascript](https://stackoverflow.com/questions/3798824/finding-unicode-character-name-with-javascript) – Ricky Mo Jan 25 '22 at 08:00
  • @RickyMo Okay so there's a list of unicode characters, but it doesn't look all that pretty. `Backquote` (taken from JavaScript) isn't there, for example. Also, not entirely sure how to convert `½` to anything useful. Can you clarify? – MortenMoulder Jan 25 '22 at 08:07
  • 1
    `string.charCodeAt()` gives you the unicode value. For example, `"½".charCodeAt(0)` gives you `189`, which is `00BD` in HEX. Then you can find `"00BD;"` from the text file, which gives you "FRACTION ONE HALF". You can even pre-parse the file to build an easily searchable database. – Ricky Mo Jan 25 '22 at 08:17
  • @RickyMo Hmm right okay, so the output won't be that pretty, unfortunately. Guess I'll have to do this whole thing manually, if I want it to be "pretty" for the end user. `LATIN SMALL LETTER A E` for the character `æ` on a Danish keyboard isn't that pretty haha. I guess I can specify which character ranges it should look at. Thanks for the replies. – MortenMoulder Jan 25 '22 at 08:23

1 Answers1

1

Using the unicode data list mentioned in the comments to your question, this may be a way to retrieve the character names (the snippets contains a small part of the mentioned list):

const app = document.querySelector(`#app`);
let unicodeList = document.querySelector(`[data-raw]`).textContent.trim();
const firstUp = str => `${str[0].toUpperCase()}${str.slice(1).toLowerCase()}`;

unicodeList = unicodeList.split(`\n`)
  .map(row => {
    const line = row.trim().split(`;`);
    return {
      code: line[0],
      decimal: parseInt(`0x${line[0]}`, 16),
      get letter() {
        return String.fromCharCode(`0x${this.code}`);
      },
      name: (line[1] || ``).startsWith(`<`) ? `-` : line[1],
    }
  });
  
app.insertAdjacentHTML(`beforeend`, 
  `<p>The unicode name for A is <b>${unicodeList.find(l => l.letter === `A`).name}</b></p>`);
app.insertAdjacentHTML(`beforeend`, 
  `<p>The unicode name for ½ is <b>${unicodeList.find(l => l.letter === `½`).name}</b></p>`);
body {
  font: 14px/18px normal verdana, arial;
  margin: 2rem;
}

.hidden {
  display: none;
}
<pre id="app"></pre>
<pre class="hidden" data-raw="1">
      00BD;VULGAR FRACTION ONE HALF;No;0;ON;<fraction> 0031 2044 0032;;;1/2;N;FRACTION ONE HALF;;;;
      0041;LATIN CAPITAL LETTER A;Lu;0;L;;;;;N;;;;0061;
      0042;LATIN CAPITAL LETTER B;Lu;0;L;;;;;N;;;;0062;
      0043;LATIN CAPITAL LETTER C;Lu;0;L;;;;;N;;;;0063;
      0044;LATIN CAPITAL LETTER D;Lu;0;L;;;;;N;;;;0064;
      0045;LATIN CAPITAL LETTER E;Lu;0;L;;;;;N;;;;0065;
      0046;LATIN CAPITAL LETTER F;Lu;0;L;;;;;N;;;;0066;
      0047;LATIN CAPITAL LETTER G;Lu;0;L;;;;;N;;;;0067;
      0048;LATIN CAPITAL LETTER H;Lu;0;L;;;;;N;;;;0068;
      0049;LATIN CAPITAL LETTER I;Lu;0;L;;;;;N;;;;0069;
      004A;LATIN CAPITAL LETTER J;Lu;0;L;;;;;N;;;;006A;
      004B;LATIN CAPITAL LETTER K;Lu;0;L;;;;;N;;;;006B;
      004C;LATIN CAPITAL LETTER L;Lu;0;L;;;;;N;;;;006C;
      004D;LATIN CAPITAL LETTER M;Lu;0;L;;;;;N;;;;006D;
      004E;LATIN CAPITAL LETTER N;Lu;0;L;;;;;N;;;;006E;
      004F;LATIN CAPITAL LETTER O;Lu;0;L;;;;;N;;;;006F;
      0050;LATIN CAPITAL LETTER P;Lu;0;L;;;;;N;;;;0070;
      0051;LATIN CAPITAL LETTER Q;Lu;0;L;;;;;N;;;;0071;
      0052;LATIN CAPITAL LETTER R;Lu;0;L;;;;;N;;;;0072;
      0053;LATIN CAPITAL LETTER S;Lu;0;L;;;;;N;;;;0073;
      0054;LATIN CAPITAL LETTER T;Lu;0;L;;;;;N;;;;0074;
      0055;LATIN CAPITAL LETTER U;Lu;0;L;;;;;N;;;;0075;
      0056;LATIN CAPITAL LETTER V;Lu;0;L;;;;;N;;;;0076;
      0057;LATIN CAPITAL LETTER W;Lu;0;L;;;;;N;;;;0077;
      0058;LATIN CAPITAL LETTER X;Lu;0;L;;;;;N;;;;0078;
      0059;LATIN CAPITAL LETTER Y;Lu;0;L;;;;;N;;;;0079;
      005A;LATIN CAPITAL LETTER Z;Lu;0;L;;;;;N;;;;007A;
</pre>
KooiInc
  • 119,216
  • 31
  • 141
  • 177