Простая библиотека для раскрашивания # хэштегов и @ упоминаний в ваших сообщениях
Интерфейсные разработчики часто работают над функциями социальных сетей.
Во многих случаях можно использовать встроенный код или виджеты для отображения последних твитов или сообщений, но иногда клиентам может потребоваться настраиваемый интерфейс. Вот что случилось со мной на этой неделе.
Эта проблема
Мне пришлось работать над анимированной лентой Twitter, и меня попросили назначить определенный цвет хэштегам и упоминаниям в тексте.
Однако, поскольку весь твит поступает из API в виде строки, мне пришлось придумать функциональный способ обработки текста для извлечения слов, начинающихся с # и @, и придания им цвета, отличного от остального текста.
Итак, я создал небольшую библиотеку!
Представляем Hashtag-Mention-Colorizer
Hashtag-Mention-Colorizer - небольшая библиотека, открывающая канал Angular. Вы можете использовать его, чтобы находить хэштеги и упоминания в ваших строках и раскрашивать их, передавая цветовой код в качестве параметра для канала.
Вы можете установить его командой:
npm i hashtag-mention-colorizer
А затем включите его в предпочтительный модуль:
Теперь канал hmcolor будет готов к использованию в шаблонах приложений.
Быстрый пример
Итак, допустим, мы хотим найти все хэштеги и упоминания в этом тексте:
Для этого мы можем использовать трубу!
Если мы не передадим ему определенный цвет, он применит стандартный голубой цвет ко всем хэштегам и упоминаниям в тексте. Мы можем попробовать это, используя этот шаблон:
Как видите, для text1 , я использую канал без объявления пользовательского цвета. Напротив, с text2 я указываю, что хочу применить цвет ‘#18BE63’.
Внимание: канал работает только путем передачи обработанной строки в элемент HTML через свойство [innerHtml].
Результат будет следующий:
Et voilà! Вы можете ознакомиться с полным кодом в репозитории GitHub библиотеки.
