All possible printable characters

Question

I need an alphabet of characters for a graphical project, so those characters must be "printable", specially in canvas element (I need to do ctx.fillText(char,...)).
Currently i'm just doing

const alphabeth = [
    'A','B','C','D','E','F','G','H','I','L','M','N','O','P','Q','R','S','T','U','V','Z',
    'a','b','c','d','e','f','g','h','i','l','m','n','o','p','q','r','s','t','u','v','z',
    '1','2','3','4','5','6','7','8','9',
    '-','+','@','?','^','!','(',')','&','#','%','$','|','<','>'
];

But this is limited to the char that I manually insert... are there way to get all printable chars? (or is exists a list of those)

Answer 1

A DOMString is a UTF-16 encoded string. JavaScript uses UCS-2 for encoding strings internally.

See this answer for converting between UCS-2 and UTF-16 codepoints. The suggested library is Punycode.

You can use a regular expression to removed unprintable characters as seen here. Just build your ranges. Instead of making a regular expression, you could map out all your ranges and filter by the hex value prior to actually encoding the value. You can use a character-literal or Unicode number when forming a range.

const CharClassRanges = [
  '0-9',  // Numeric
  'a-z',  // Latin
  'α-ω',  // Greek
  '一-龯', // Japanese -- https://gist.github.com/terrancesnyder/1345094
  '\uFB1D-\uFB4F', // Hebrew (a few in range are unprintable)
  '!"#$%&\'()*+,.\/:;<=>?@\\[\\] ^_`{|}~-' // Special charcters
];
const PrintableUnicode = new RegExp(`^[${CharClassRanges.join('')}]*$`, 'i');

console.log(PrintableUnicode)

/**
 * Generate a range of UTF-16 Unicode values from 0xFEFF0000 to 0xFEFFFFFF.
 * @see http://www.fileformat.info/info/charset/UTF-16/list.htm
 */
function* generatePrintableUTF16() {
  const result = [];
  for (let i = 0x0000; i < 0xFFFF; i++) {
    const value = punycode.ucs2.encode([i]);
    if (PrintableUnicode.test(value)) {
      yield value;
    }
  }
};

console.log([...generatePrintableUTF16()].join('\n')); // Scroll to see all

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>

The example below generates ~65,535 Unicode characters. Let's just say that you shouldn't really need to validate the text in the call.

/**
 * Generate a range of UTF-16 Unicode values from 0xFEFF0000 to 0xFEFFFFFF.
 * @see http://www.fileformat.info/info/charset/UTF-16/list.htm
 */
const generateUTF16 = () => {
  const result = [];
  for (let i = 0x0000; i < 0xFFFF; i++) {
    result.push(punycode.ucs2.encode([i]));
  }
  return result;
};

console.log(generateUTF16().join('\n')); // Scroll to see all 

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>

The main Latin characters range between (0xFEFF0021 and 0xFEFF007E).

/**
 * Generate a range of UTF-16 Unicode values from 0xFEFF0000 to 0xFEFFFFFF.
 * @see http://www.fileformat.info/info/charset/UTF-16/list.htm
 */
const generateLatinUTF16 = () => {
  const result = [];
  for (let i = 0x21; i < 0x7F; i++) {
    result.push(punycode.ucs2.encode([i]));
  }
  return result;
};

console.log(generateLatinUTF16().join('\n')); // Scroll to see all

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>

Answer 2

Assuming you want all the caracters from the ascii table you can do that :

Edit: I haded a banlist or caracters who aren't printable

let caracters = []
let ban= [0,9,12,13,32] // ban list of caracters that are not printable
for(let i=0; i<127; i++ ){
    let temp = false
    ban.map(item=>{
        if(i == item){
            temp = true
        }
    })

    if(!temp){
        caracters.push(String.fromCharCode(i))
    }
    

}

console.log(caracters)