Как заменить смайлики в html на twemoji?
В пользовательских сообщениях у меня много необработанных смайликов, таких как
<p>I ❤ your post!</p>
Мне интересно, как лучше всего заменить эти смайлики красочными смайликами, такими как:
<p>I <i class = "twa twa-heart">❤️</i> your post!</p>
Я хотел бы оформить смайлики с помощью библиотеки твемодзи.
Вы можете спросить, почему бы не позволить пользователям вставлять стилизованные смайлики в первую очередь при выборе смайликов? Ответ заключается в том, что текстовый редактор интерфейса не поддерживает WYSIWYG, а пользовательские сообщения сильно урезаны. Поэтому такой вариант исключен, и я ищу решение, которое выполняет это преобразование во время рендеринга.
@Джек Башфорд. Есть десятки смайликов, с которыми нужно иметь дело. Поэтому я не уверен, что лучше всего подходит для анализа и замены всей страницы.
Документация на их главной странице в GitHub буквально говорит вам, как это сделать: twemoji.parse(document.body);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);Ознакомьтесь с документацией для 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!
*/
Как я могу применить это ко всей странице?
Я дал ссылку на API, но вот ваша прямая ссылка. github.com/twitter/twemoji#дом-разбор. Просто введите тег HTML5, в котором хранится их сообщение.
Это работает как шарм: $(document).ready(function () { document.body = twemoji.parse(document.body); }); Спасибо!
Без проблем, рад помочь!
Вы бы просто использовали
replace.