Как преобразовать смайлики в обычный текст в javascript/jquery

У меня есть текстовое поле, которое, естественно, в мобильной версии дает возможность вставлять смайлы.

<textarea data-event = "keyup" data-label = "text" id = "my-field"></textarea>

Я хотел бы преобразовать каждый смайлик в обычный текст, как только пользователь вставит смайлик. Есть ли способ использовать стандартную строку для каждого смайлика Юникода? Если это существует, как это сделать в javascript или jQuery? Я нашел решения только для удаления смайлов из строки.

Пример конвертации:

😊 чтобы :)

Я нашел список здесь: unicode.org/emoji/charts/full-emoji-list.html

— 13.09.2023 21:31

Знаете ли вы, что список эмодзи Unicode довольно велик? У них нет классических аналогов.

— 13.09.2023 21:31

Мне неизвестно о существовании сопоставления эмодзи с текстом. Возможно, вам придется поддерживать только некоторые из них и создавать сопоставления самостоятельно.

— 13.09.2023 21:32

@RokoC.Buljan Да, я спросил, существует ли стандарт.

— 13.09.2023 21:32

Благодаря списку, который я добавил в комментариях, я нашел способ конвертировать смайлики в короткое имя CLDR stackoverflow.com/questions/61524478/…

— 13.09.2023 21:35

javascript jquery emoji

13.09.2023 21:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете перехватить событие paste и преобразовать смайлик в соответствующий текстовый эквивалент ASCII.

Я сгенерировал регулярное выражение из ключей карты поиска. Перед текстом ASCII добавляется пробел для заполнения; в случае, когда одновременные/соседние эмодзи вставляются одновременно.

const emojiMapper = {
  "😊": ":)",
  "😟": ":(",
  "😛": ":p"
};
const emojiPattern = new RegExp(`(${Object.keys(emojiMapper).join('|')})`, 'g');

const lookup = (emoji) => (found => found ? ' ' + found : emoji)(emojiMapper[emoji]);

const onPaste = (e) => {
  e.stopPropagation();
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData('text/plain');
  transformTextWithEmoji(text, e.target);
};

// Based on: https://gist.github.com/paradite/f66862dbfb61001c8dd09680747eec06
const transformTextWithEmoji = (text, target) => {
  const cursorPosStart = target.selectionStart;
  const cursorPosEnd = target.selectionEnd;
  const textBefore = target.value.substring(0, cursorPosStart);
  const textAfter = target.value.substring(cursorPosEnd);
  const transformed = replaceAllEmoji(text);
  target.value = textBefore + transformed + textAfter;
  setTimeout(() => {
    const anchorOffset = cursorPosStart + transformed.length;
    target.selectionStart = target.selectionEnd = anchorOffset;
  });
};

const replaceAllEmoji = (text) =>
  text.replace(emojiPattern, (_, emoji) => lookup(emoji));

document.querySelector('#my-field').addEventListener('paste', onPaste);

<textarea id = "my-field" rows = "2" cols = "60">Hello World!</textarea>

<!-- 1. Copy: "It works! 😊😛" -->
<!-- 2. Paste in <textarea>     -->
<!-- 3. ???                     -->
<!-- 4. Profit                  -->

Вот более полный пример. Он включает больше смайлов и использует редуктор вместо регулярного выражения.

Я позаимствовал пары ключ-значение из этого ответа.

// Decide which key-value pair to keep... 
const emojiLookup = {
  "👋": "o/",
  "💔": "</3",
  "💗": "<3",
  "😁": "8-D",
  "😁": "8D",
  "😁": ":-D",
  "😁": "=-3",
  "😁": "=-D",
  "😁": "=3",
  "😁": "=D",
  "😁": "B^D",
  "😁": "X-D",
  "😁": "XD",
  "😁": "x-D",
  "😁": "xD",
  "😂": ":')",
  "😂": ":'-)",
  "😃": ":-))",
  "😄": "8)",
  "😄": ":)",
  "😄": ":-)",
  "😄": ":3",
  "😄": ":D",
  "😄": ":]",
  "😄": ":^)",
  "😄": ":c)",
  "😄": ":o)",
  "😄": ":}",
  "😄": ":っ)",
  "😄": "=)",
  "😄": "=]",
  "😇": "0:)",
  "😇": "0:-)",
  "😇": "0:-3",
  "😇": "0:3",
  "😇": "0;^)",
  "😇": "O:-)",
  "😈": "3:)",
  "😈": "3:-)",
  "😈": "}:)",
  "😈": "}:-)",
  "😉": "*)",
  "😉": "*-)",
  "😉": ":-,",
  "😉": ";)",
  "😉": ";-)",
  "😉": ";-]",
  "😉": ";D",
  "😉": ";]",
  "😉": ";^)",
  "😐": ":-|",
  "😐": ":|",
  "😒": ":(",
  "😒": ":-(",
  "😒": ":-<",
  "😒": ":-[",
  "😒": ":-c",
  "😒": ":<",
  "😒": ":[",
  "😒": ":c",
  "😒": ":{",
  "😒": ":っC",
  "😖": "%)",
  "😖": "%-)",
  "😜": ":-P",
  "😜": ":-b",
  "😜": ":-p",
  "😜": ":-Þ",
  "😜": ":-þ",
  "😜": ":P",
  "😜": ":b",
  "😜": ":p",
  "😜": ":Þ",
  "😜": ":þ",
  "😜": ";(",
  "😜": "=p",
  "😜": "X-P",
  "😜": "XP",
  "😜": "d:",
  "😜": "x-p",
  "😜": "xp",
  "😠": ":-||",
  "😠": ":@",
  "😡": ":-.",
  "😡": ":-/",
  "😡": ":/",
  "😡": ":L",
  "😡": ":S",
  "😡": ":\\",
  "😡": "=/",
  "😡": "=L",
  "😡": "=\\",
  "😢": ":'(",
  "😢": ":'-(",
  "😤": "^5",
  "😤": "^<_<",
  "😤": "o/\\o",
  "😫": "|-O",
  "😫": "|;-)",
  "😰": ":###..",
  "😰": ":-###..",
  "😱": "D-':",
  "😱": "D8",
  "😱": "D:",
  "😱": "D:<",
  "😱": "D;",
  "😱": "D = ",
  "😱": "DX",
  "😱": "v.v",
  "😲": "8-0",
  "😲": ":-O",
  "😲": ":-o",
  "😲": ":O",
  "😲": ":o",
  "😲": "O-O",
  "😲": "O_O",
  "😲": "O_o",
  "😲": "o-o",
  "😲": "o_O",
  "😲": "o_o",
  "😳": ":$",
  "😵": "#-)",
  "😶": ":#",
  "😶": ":&",
  "😶": ":-#",
  "😶": ":-&",
  "😶": ":-X",
  "😶": ":X",
  "😼": ":-J",
  "😽": ":*",
  "😽": ":^*",
  "🙅": "ಠ_ಠ",
  "🙆": "*\\0/*",
  "🙆": "\\o/",
  "😄": ":>",
  "😡": ">.<",
  "😠": ">:(",
  "😈": ">:)",
  "😈": ">:-)",
  "😡": ">:/",
  "😲": ">:O",
  "😜": ">:P",
  "😒": ">:[",
  "😡": ">:\\",
  "😈": ">;)",
  "😤": ">_>^",
};

const onPaste = (e) => {
  e.stopPropagation();
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData('text/plain');
  transformTextWithEmoji(text, e.target);
};

// Based on: https://gist.github.com/paradite/f66862dbfb61001c8dd09680747eec06
const transformTextWithEmoji = (text, target) => {
  const cursorPosStart = target.selectionStart;
  const cursorPosEnd = target.selectionEnd;
  const textBefore = target.value.substring(0, cursorPosStart);
  const textAfter = target.value.substring(cursorPosEnd);
  const transformed =  replaceAllEmoji(text);
  target.value = textBefore + transformed + textAfter;
  setTimeout(() => {
    const anchorOffset = cursorPosStart + transformed.length;
    target.selectionStart = target.selectionEnd = anchorOffset;
  });
};

const replaceAllEmoji = (text) =>
  Object.entries(emojiLookup).reduce((result, [emoji, ascii]) =>
    result.replace(emoji, ' ' + ascii), text);

document.querySelector('#my-field').addEventListener('paste', onPaste);

<textarea id = "my-field" rows = "2" cols = "60">Hello World!</textarea>

<!-- 1. Copy: "It works! 👋😲😜" -->
<!-- 2. Paste in <textarea>     -->
<!-- 3. ???                     -->
<!-- 4. Profit                  -->

13.09.2023 22:05

Другие вопросы по теме

Изменение параметров выборки данных на основе выбора с помощью

Изменить порядок div на «номер гибкого заказа» при выборе фильтра с помощью jquery

Переменная PHP $_POST не устанавливается после использования jQuery для отключения нажатой кнопки и изменения ее текста

Две модальные формы с PHP и jQuery

Используя Jquery, как разбить узел на более мелкие узлы

Как я могу получить текстовое значение элемента li в дереве при нажатии на любой элемент li?

Как решить, что JS Regex не работает во время нажатия клавиши

POST Err_Connection_Refused

Как сгенерировать строки и столбцы с данными загрузки с помощью JQuery?

Можно ли работать с двумя разными запросами javascript для разных функций в одном разделе HTML?

Как преобразовать смайлики в обычный текст в javascript/jquery

Ответы 1

Другие вопросы по теме

Похожие вопросы