Портирование nl2br в Javascript / React - Как вручную экранировать текст? - PullRequest
Новая
       20

Портирование nl2br в Javascript / React - Как вручную экранировать текст?

0 голосов
/ 31 октября 2019

Я портирую небольшой побочный проект с рендеринга шаблонов на стороне сервера + на Flask + React. Один компонент использует пользовательский фильтр Jinja2, nl2br, , который просто переводит новые строки в виде открытого текста в теги <p> и <br> в HTML. Я хотел бы реализовать нечто подобное в идиоматическом Javascript (с акцентом на React).

Я думаю, что ключевой шаг, который я пропускаю, - это способ вручную выполнить то же экранирование, которое React применяет к строковым переменным вJSX. Это где-нибудь раскрывается?

Исходный код Python: 

import re
from jinja2 import evalcontextfilter
from markupsafe import Markup, escape

_paragraph_re = re.compile(r'(?:\r\n|\r|\n){2,}')

@evalcontextfilter
def nl2br(eval_ctx, value):
    result = u'\n\n'.join(u'<p>%s</p>' % p.replace('\n', Markup('<br>\n'))
                          for p in _paragraph_re.split(escape(value)))
    if eval_ctx.autoescape:
        result = Markup(result)
    return result

Структура кода: 1. экранировать ввод, 2. разбить его на абзацы (<p>) по парамновых строк, 3. заменить новые строки внутри абзацев тегами <br>, и 4. обернуть Markup, если конфигурация требует вывода HTML, и использовать декоратор @evalcontextfilter, чтобы отключить нежелательное автоэкранирование.

Серединадва шага могут быть переведены непосредственно в Javascript (просто регулярное выражение и обработка строк). Я думаю, что аналогом React последнего шага является использование dangerouslySetInnerHTML. Но я не могу найти хороший способ выполнить первый. В NPM есть все виды экранирующих библиотек HTML, но я бы хотел использовать встроенную экранировку React для согласованности, если это возможно.

...