JavaScript alt/花哨文本生成 [英] javascript alt/fancy text generation

问题描述

我正在尝试了解Alt Text/花哨文本生成的工作原理。

当我说Alt Text/Fight Text时，我的意思是：Text Like：𝕖𝕩𝕒𝕞𝕡𝕝𝕖 𝕥𝕖𝕩𝕥(Source)

我已经找了40分钟了，但我什么也找不到。我正在尝试用JavaScript制作一些东西，但我甚至不知道如何开始，因为我不了解它是如何生成的。

我想做一个允许您将普通ASCII字符转换为很酷/花哨的文本的Make a网站。执行此操作时，使用JavaScript文本生成这些很酷/很奇特的文本。

1. 用户在输入框中键入example text，同时键入.

2. 使用JavaScript将其实时转换为𝕖𝕩𝕒𝕞𝕡𝕝𝕖 𝕥𝕖𝕩𝕥

因此只要用户键入e，它就会开始转换e。

我正在尝试制作我自己版本的coolsymbol

推荐答案

这些特殊字符实际上每个都由两个代码点组成：55349和其他56658及以上代码点(第二个代码点因每个字符而异)。

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

您可以使用正则表达式将输入中的每个字符替换为由55349代码点加上与相关字符相关的代码点组成的字符串：

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>

这篇关于JavaScript alt/花哨文本生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！