Регулярные выражения для добавления классов в HTML-теги

1

Я работаю над проектом reactjs и имею базовый html, проходящий через json. Мне нужно вернуться к разметке и добавить в нее классы начальной загрузки, чтобы она была правильно написана на странице.

текущая функция

  const markupFormatting = (html) => {
    html = html.replace(/<p/g, '<p class="paragraph-margin-bottom-10 text--font-size-14 paragraph--justified"')
    html = html.replace(/<a/g, '<a class="text--font-size-14 hyperlink-primary"')
    return html
  }

http://jsfiddle.net/0ht35rpb/64/

Есть ли более чистый способ сделать это?

Теги:

2 ответа

1

Вы можете использовать jQuery для анализа HTML и добавления классов

const $html = $(html);
$html.find('p').addClass('paragraph-margin-bottom-10 text--font-size-14 paragraph--justified');
$html.find('a').addClass('text--font-size-14 hyperlink-primary');
return $html.html();

Это защищает вас от нескольких краевых дел, например, добавляет свойство дублирующегося class. Это работает на стороне сервера, а также с библиотекой cheerio.

PS: Существует эта драгоценность об использовании RegEx для работы с HTML: RegEx сопоставляет открытые теги, кроме XHTML-самодельных тегов.

Поделиться
  • 0
    Это был реактивный проект - было немного сомнительно добавить библиотеку jquery к этому подходу. Я не должен был включать это еще -
  • 0
    Возможно я должен добавить это к компоненту - это уже в пакете
Показать ещё 9 комментариев
0

Вы можете использовать его таким образом:

  var html1 = '<p>some test with a <a href="text">link</a></p><p>another paragraph with a <a href="test2">link</a></p>';

  function markupFormatting(html1){
    var e = document.createElement('div');
    e.innerHTML = html1;

    e.querySelectorAll('a').forEach(function(obj,i){obj.setAttribute("class", "abc")});

    return e;
  }

  console.log(markupFormatting(html1))
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню