Динамическое перенос строк в HTML-теги с использованием ReactJS и Regex

Будь то добавление тегов кода к заголовкам или что-то еще, перенос строк в теги HTML может быть полезным инструментом. Вот как это сделать в ReactJS.

На днях, работая над своим личным блогом, я заметил, что у меня есть несколько сообщений в блоге, которые ссылаются на встроенные блоки кода в заголовке, но они будут отображаться прямо на странице в виде строк, но окружены ``. Это не конец света, но я подумал, насколько было бы лучше, если бы заголовок действительно отображал блоки встроенного кода как настоящие HTML-теги `code` с соответствующим стилем, который я добавляю для них на своем веб-сайте.

Итак, в этом сообщении в блоге я собираюсь пройти именно это. Как вы можете взять любую строку, а затем обернуть часть этой строки в теги HTML по вашему выбору, прежде чем отображать ее в DOM с помощью ReactJS.

Предпосылки

Возможно, вы уже догадались об этом по вступлению выше, но вам понадобится несколько вещей, прежде чем вы сможете следовать этому руководству. Прежде всего, ваш сайт должен будет так или иначе использовать ReactJS, я буду использовать Next.js. И, во-вторых, вам нужно будет иметь доступ к вашему тексту в виде строки. В моем случае мой блог работает на MDX, поэтому вся основная информация и, самое главное, заголовок даются мне в виде строк до того, как они будут отображены на странице.

Методы, описанные в этом руководстве, могут работать в других ситуациях и конфигурациях, но вам может потребоваться перенастроить некоторые части руководства, чтобы они заработали.

Подставляем нашу строку

Первое, что вам нужно сделать, это выбрать символы, слова или строки, которые вы хотите использовать для переноса в HTML-теги. В моем случае, как упоминалось ранее, я ориентируюсь на встроенные блоки кода, которые всегда заключены в обратные кавычки (`). So, whenever backticks are encountered I want to wrap any text contained with them to be wrapped with `code` tags. For example, if we had `Array.isArray()`` в строке для заголовка сообщения в блоге, я бы хотел, чтобы он был заменен на `<code>`Array.isArray() `</code>`.

Волшебный метод

Чтобы выполнить замену, мы собираемся использовать метод `String.replace()`, но мы не можем просто подключить наши обратные кавычки к методу замены и ожидать, что он сработает. Это происходит по двум причинам.

  1. `.replace()` заменяет только первый экземпляр предоставленной целевой строки, поэтому, если бы мы хотели настроить таргетинг на несколько экземпляров, он будет нацелен только на первый.
  2. Мы хотим заменить все между целевыми строками, а также сами цели, а не только цель, которую мы передаем в `.replace()`.

Эти две причины исключают использование простой передачи наших целевых строк в `.replace()`, но, боюсь, решения нет. Всемогущее регулярное выражение!

Для меня нужно регулярное выражение `/`(.*?)`/g`, это регулярное выражение нацелено на все, что находится между обратными кавычками, и делает это глобально по всей строке. По сути, он заменяет все между обратными кавычками для каждого вхождения обратных кавычек в переданной ему строке.

Чтобы обернуть любые строки внутри обратных кавычек блоками `code`, я могу сделать что-то вроде этого.

const wrappedTitle = title.replace(/`(.*?)`/g, "<code>$&</code>");

Самые внимательные из вас, возможно, заметили, что внутри тегов `code`, которыми я заменяю регулярное выражение, происходит что-то странное. Это `$&` символов. Этот символ — удобный способ доступа к тому, что соответствует переданному нами регулярному выражению. Итак, теперь мы можем взять нашу исходную строку, сопоставить все, что содержалось в обратных кавычках, используя наше регулярное выражение, а затем заменить совпадающую строку самой собой, но завернутой в `code` блоков. 🙌

Есть и другие шаблоны, которые вы можете использовать за пределами `$&`, читайте о них здесь.

Стайлинг

Для моего блога у меня есть особый стиль, который я использую для встроенных блоков кода в своих сообщениях. Итак, я хотел, чтобы этот стиль также использовался в заголовках сообщений, в которых есть встроенные блоки кода. К счастью, теперь у нас есть настройка замены, и наша целевая строка заключена в теги `code`, которые несложно добавить.

На своем веб-сайте я использую TailwindCSS, поэтому синтаксис и стили могут отличаться для вас в зависимости от того, как вы делаете свой CSS и какой у вас стиль. Но чтобы добавить стили к нашим новым тегам `code`, нам просто нужно добавить к ним классы вот так.

const wrappedTitle = title.replace(
/`(.*?)`/g,
'<code class="p-1 font-extrabold">$&</code>'
);

Итак, теперь, когда этот новый заголовок отображается на странице, тексту внутри тега `code` будут присвоены классы TailwindCSS `p-1` для заполнения и `font-extrabold` для толщины шрифта, чтобы он соответствовал другим блокам встроенного кода в моем блоге.

ПРИМЕЧАНИЕ. Если вы используете TailwindCSS для стилей и хотите сделать то, что я сделал выше, убедитесь, что стили, которые вы добавляете к замененной строке, уже используются на веб-сайте в другом месте. Это связано с тем, что TailwindCSS включает только стили, используемые на странице, когда она компилируется, а стили, добавленные в `.replace()`, не обнаруживаются, поэтому их нужно использовать где-то еще, чтобы включить в скомпилированные стили. Как только стили включены в скомпилированные, они отображаются правильно.

Визуализация нашей новой строки

Теперь у нас есть наша новая струна, готовая к работе. Наши целевые строки были заключены в выбранные нами теги HTML, и были добавлены все стили. Теперь все, что осталось сделать, это фактически отобразить его на странице.

Именно здесь вступает в дело ReactJS, потому что мы будем использовать `dangerouslySetInnerHTML`, ** это позволит нам заменить `innerHTML` тега HTML на странице новым HTML. Итак, в моем случае изменения заголовков сообщений в блоге я беру тег `h1` страницы и добавляю к нему `dangerouslySetInnerHTML` **; предоставив ему новый обернутый заголовок HTML, например так.

<h1 dangerouslySetInnerHTML={{ __html: wrappedTitle }} />

ПРИМЕЧАНИЕ. `dangerouslySetInnerHTML` может, как следует из названия, быть опасным для вашего сайта и его пользователей. Однако этот риск становится проблемой только тогда, когда вы передаете HTML из сторонней службы или внешнего пользователя, когда вы не знаете, что такое HTML. В случае с этим сообщением в блоге его можно использовать, потому что мы полностью контролируем HTML и его содержимое, поэтому мы знаем, что в нем нет ничего вредоносного.

Когда `h1` затем отображается на странице, HTML внутри него заменяется HTML нашего `wrappedTitle`, который содержит теги `code` и стили, которые мы добавили ранее. Ниже приведен пример готового продукта в одном из моих сообщений в блоге с использованием тегов `code` в заголовке.

Заключительные мысли

Вот и все! Мы взяли строку, содержащую целевые символы, и обернули их тегами HTML по нашему выбору, прежде чем придать им стиль и отобразить на странице для просмотра пользователями.

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

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

Спасибо за чтение.

Конер

🔔 Эта статья изначально была опубликована в моем блоге 🔔