javascript alt/花式文本生成

Question

我试图了解替代文本/花式文本生成的工作原理。

当我说替代文字/花式文字时，我的意思是：像这样的文字：（ 来源）

我已经搜索了 40 分钟，但我找不到任何关于此的信息。我正在尝试用 JavaScript 制作一些东西，但我什至不知道如何开始，因为我不明白它是如何生成的。

我想制作一个网站，允许您将普通的 ASCII 字符转换为酷/花哨的文本。这样做，使用 JavaScript 文本生成这些很酷/花哨的文本。

1. 用户example text在输入框中输入内容，因为他们正在输入...

2. 使用 JavaScript 将其实时转换为

所以只要用户输入e它就开始转换它e。

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

Answer 1

这些特殊字符实际上每个都由两个代码点组成：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>