В эпоху бурного развития цифровой экономики бизнес неизменно выходит в онлайн: сегодня все больше участников рынка имеют собственные мобильные и десктопные приложения, в раскрутку которых вложены немалые средства. В этой связи желание бизнеса защитить имиджевые составляющие от копирования вполне закономерно, и регистрация иконок приложения (пиктогр…
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации для айтишников всех специальностей и уровней вы найдете на нашем сайте DevGeeks.
Далее нам нужно использовать библиотеку, которую мы только что импортировали, и заставить ее разобрать наш Unicode в Twemojis. Существует два способа разбора ваших эмодзи, и я расскажу об обоих, чтобы вы решили, какой из них больше подходит для ваших нужд.
Первый и более простой вариант - это заставить Twemoji проанализировать весь наш DOM и автоматически преобразовать каждый Unicode emoji и заменить его на Twemoji. Чтобы реализовать это, все, что нам нужно сделать, это использовать пакет, который мы только что импортировали, и передать ему тело нашего документа следующим образом:
Как только мы вызовем twemoji.parse и передадим ему тело документа в качестве аргумента, он разберет все, что находится внутри тела. И заменит текстовые Unicode emojis на изображения Twemoji без ущерба для окружающих записей.
Имейте в виду, что этот метод сопровождается некоторым снижением производительности, поскольку мы выполняем эту операцию над каждым элементом внутри нашего тела, что может быть довольно дорогостоящим.
Для своего проекта я выбрал путь ручного парсинга. Это дало мне больше контроля над тем, как обрабатываются данные, и снизило потери производительности по сравнению с разбором всего документа.
Но этот метод более сложный, и я бы не рекомендовал его использовать, если у вас нет веских причин, чтобы решить вручную разобрать ваши emojis вместо того, чтобы разбирать весь документ.
Если первым аргументом twemoji.parse является HTMLElement, метод автоматически разберет элемент и заменит эмодзи внутри документа. Если же первым элементом является строка, метод разберет один эмодзи и позволит нам получить данные в функции обратного вызова, которую мы можем определить.
Как видите, параметры обратного вызова дают нам всю информацию, необходимую для построения исходного URL и добавления его в наш документ в виде изображения.
Теперь мы можем вызвать этот метод из обратного вызова, чтобы получить URL источника, затем создать новый тег изображения и добавить его в наш документ.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"const emoji = \"📮\"\ntwemoji.parse(emoji, {\n\tcallback: (icon, options) => {\n \n\t\t// создать тег изображения\n\t\tconst img = document.createElement('img');\n\n\t\t// назначить источник изображения\n\t\timg.src = constructTwemojiURL(icon, options) \n\t\timg.alt = \"Twemoji\"\n\n\t\t// добавляем тег в тело нашего документа\n\t\tdocument.body.append(img)\n\n\t}\n})","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Наконец, если мы откроем HTML-документ в нашем браузере, мы увидим наш Twemoji. На этом этапе ваш HTML-документ должен выглядеть следующим образом:
Вот, в общем-то, и все! В этой статье мы поговорили о том, почему вы можете решить использовать Twemojis в своем веб-приложении, и рассмотрели два различных способа реализации этого в зависимости от вашего сценария использования.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":1,"reposts":0,"views":6,"hits":923,"reads":null,"online":0},"dateFavorite":0,"hitsCount":923,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1201640/431747-twitter-emoji-kak-ispolzovat-krasivye-emodzi-na-svoem-saite","author":{"id":1201640,"name":"DevGeeks","nickname":null,"description":"DevGeeks.ru - это сайт c различными статьями и примерами для айтишников всех специальностей и уровней","uri":"","avatar":{"type":"image","data":{"uuid":"d3138946-94c7-5320-98d3-19de2fd6c0b5","width":200,"height":200,"size":2032,"type":"png","color":"232323","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"01a3e978-2115-54ee-ba19-dbd8da9494bd","width":1500,"height":500,"size":26134,"type":"png","color":"242424","hash":"","external_service":[]}},"cover_y":78},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4243019,"userId":1201640,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4243019"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":619485,"userId":1201640,"count":0,"shareImage":"https://api.vc.ru/achievements/share/619485"}],"lastModificationDate":1764953531,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1201640,"name":"DevGeeks","nickname":null,"description":"DevGeeks.ru - это сайт c различными статьями и примерами для айтишников всех специальностей и уровней","uri":"","avatar":{"type":"image","data":{"uuid":"d3138946-94c7-5320-98d3-19de2fd6c0b5","width":200,"height":200,"size":2032,"type":"png","color":"232323","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"01a3e978-2115-54ee-ba19-dbd8da9494bd","width":1500,"height":500,"size":26134,"type":"png","color":"242424","hash":"","external_service":[]}},"cover_y":78},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4243019,"userId":1201640,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4243019"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":619485,"userId":1201640,"count":0,"shareImage":"https://api.vc.ru/achievements/share/619485"}],"lastModificationDate":1764953531,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":2}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};