javascript alt/fancy text generation [closed]

问题

I am trying to understand how alt text/fancy text generation works.

When I say alt text/fancy text, I mean: text like: 𝕖𝕩𝕒𝕞𝕡𝕝𝕖 𝕥𝕖𝕩𝕥 (Source)

I've been searching for 40 minutes but I can't find anything on this. I am trying to make something in JavaScript, but I don't even know how to start because I don't understand how it is being generated.

I want to make a make a website which allows you to convert normal ASCII characters into cool/fancy text. Doing this, using JavaScript text generate these cool/fancy texts.

User types example text into the input box, as they are typing...
Using JavaScript it converts it in real time to 𝕖𝕩𝕒𝕞𝕡𝕝𝕖 𝕥𝕖𝕩𝕥

So as soon as the user types e it starts to convert it e.

I am trying to make my own version of coolsymbol

回答1:

Those special characters are actually each composed of two code points: 55349 and something else, 56658 and above (the second code point varies for each character).

const str = '𝕒';
console.log(str.charCodeAt(0), str.charCodeAt(1));

You can use a regular expression to replace each character in the input with a string composed of the 55349 code point, plus the code point related to the character in question:

const input = document.querySelector('#input');
const output = document.querySelector('#output');
input.addEventListener('blur', () => {
  output.textContent = input.value.replace(/[a-z]/g, (char) => {
    // make code indexed from 0 to 25, corresponding to a to z:
    const code = char.charCodeAt() - 97;
    // add the above to 56658, since 56658 represents 𝕒:
    return String.fromCharCode(55349, code + 56658);
  });
});

<input id="input" value="example text">
<div id="output"></div>

来源：https://stackoverflow.com/questions/54719156/javascript-alt-fancy-text-generation

标签

javascript

unicode

ascii