Как заменить смайлики в html на twemoji?

Question

В пользовательских сообщениях у меня есть много необработанных смайликов, таких как

   <p>I ❤ your post!</p> 

Мне интересно, как лучше заменить эти смайлики красочными смайликами, такими как:

 <p>I <i class="twa twa-heart">❤️</i> your post!</p>

Я бы хотел придать стиль смайликам с библиотекой twemoji .

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

Answer 1

Проверьте документы для twemoji .... https://github.com/twitter/twemoji#api

API

Ниже приведены все методы, представленные в пространстве имен twemoji.

twemoji.parse (...) V1

Это основная утилита синтаксического анализа, имеющая 3 перегрузки для каждого типа синтаксического анализа.

Существует в основном два вида синтаксического анализа: синтаксический анализ строки и синтаксический анализ DOM .

Вы можете анализировать строки (анализировать их ввод).

Я полагаю, вы ищете сглаживание вот так :

Однако для уже обработанных строк этот метод можно считать достаточно безопасным. Пожалуйста, смотрите разбор DOM, если безопасность является одной из ваших главных проблем.

twemoji.parse('I \u2764\uFE0F emoji!');

// will produce
/*
I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="https://twemoji.maxcdn.com/36x36/2764.png"/> emoji!
*/

Answer 2

Используйте объект, где ключом является зарезанный эмодзи, а значением является полный HTML-контент. Перебирайте каждый символ в строке и проверяйте, не является ли это урезанным эмодзи. Если это так, замените его. Наконец, объедините все это вместе и напишите на страницу.

const raw = "<p>I ❤ your post!</p>";
const emojis = {
  "❤": `<i class="twa twa-heart">❤️</i>`
};
const res = [...raw].map(e => emojis[e] || e).join("");
document.write(res);