JavaScript alt/花哨文本生成

本教程将介绍JavaScript alt/花哨文本生成的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

问题描述

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

当我说Alt Text/Fight Text时,我的意思是:Text Like:??????? ????(Source)

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

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

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

    使用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/花哨文本生成的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。

0
没有账号?注册  忘记密码?