Блог

Главная - Вопросы по программированию - Лучший способ обернуть определенные HTML-элементы в HTML-строку?

Лучший способ обернуть определенные HTML-элементы в HTML-строку?

#javascript #html #reactjs

Вопрос:

У меня есть веб-приложение, в котором мой интерфейс (React, JavaScript) получает очищенные HTML-строки, которые могут содержать <span> элементы.

Пример:

'testing <span id="1">hello world</span> 2222222'

Я могу отобразить это без проблем с помощью dangerouslySetInnerHTML .

Однако в моем интерфейсе я хочу обернуть эти <span> s в другой компонент. Например:

testing <NicerSpan><span id="1">hello world</span></NicerSpan> 2222222 .

Я могу сделать это с помощью регулярного выражения: создайте регулярное выражение, соответствующее <span>...</span> s, разделите html-строку с помощью регулярного выражения, а затем повторите все совпадения и оберните его в нужный компонент:

 <div>
  {replaceSpans(myHtmlString, (match) => (
    <NicerSpan>{match}</NicerSpan>
  ))}
</div>
 
 const replaceSpans = (span, matchFn) => {
  const split = span.split(spanRegex);

  // apply fn to all matches (located at odd-indexes)
  for (let i = 1; i < split.length; i  = 2) {
    split[i] = matchFn(split[i]);
  }
  return split;
};

Регулярное выражение, которое я использую, таково /(<span[^>]*>[sS] </span>)/g .

Я создал кодовую строку, которая демонстрирует вышеописанную работу: https://codepen.io/dero0/pen/ZEKoYGQ.

Вы можете видеть, что предоставленная <span> в HTML-строке строка теперь обернута в другой компонент со стилем (фактический компонент в моем приложении выполняет множество других функций, это всего лишь пример). Короче говоря, я хочу завернуть <span> букву s в HTML-строку с помощью другого компонента.

Однако я чувствую, что это не очень надежное или эффективное решение. Есть ли лучшее решение для этого? В идеале без использования jQuery.

Спасибо!

Метки: