javascript alt/fancy text generation [closed]

情到浓时终转凉″ 提交于 2020-04-11 01:44:02

问题


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.

  1. User types example text into the input box, as they are typing...

  2. 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!