RegEx для замены нескольких тегов HTML

Я пытаюсь найти регулярное выражение, которое будет соответствовать нескольким тегам html, исключить содержимое между ними, чтобы теги упаковки можно было заменить другим тегом html. Эта замена должна работать с большим HTML-документом, в котором есть много экземпляров одного и того же формата <div><strong>...</strong></div>.

Текущий HTML

<div>
  <div><strong>Heading</strong></div>
  <div>Some other content<div>
  <div><strong>Heading Title 2</strong></div>
  <div>Some more content</div>
</div>

Желаемый HTML

<div>
  <div class = "heading">Heading</div>
  <div>Some other content<div>
  <div class = "heading">Heading Title 2</div>
  <div>Some more content</div>
</div>

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

Лучшее регулярное выражение, которое у меня есть: /<div><strong\b[^>]*>(.*?)</strong></div>/g

по какой причине вам нужен Reg Ex вместо простой замены примитивного содержимого в строке?

— 30.05.2019 23:32

javascript regex regex-negation regex-group regex-greedy

30.05.2019 23:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

582

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте заменить, чтобы заменить div заново отформатированным div.

[...document.querySelectorAll('div > strong')].forEach(item => {
  // item is the 'strong' element
  // Create a new div
  let div = document.createElement('div')

  // Add a heading class to the div
  div.classList.add('heading')

  // Set the text of the div
  div.innerHTML = item.innerHTML
  
  // Replace the 'strong' elements parent with the new div
  item.parentNode.replaceWith(div)
})

.heading {
  font-size: 20px;
  font-weight: bold;
}

<div>
  <div><strong>Heading</strong></div>
  <div>Some other content<div>
  <div><strong>Heading Title 2</strong></div>
  <div>Some more content</div>
</div>

30.05.2019 23:36

Ответ принят как подходящий

Используемое вами регулярное выражение должно работать. Вы можете использовать $1, чтобы скопировать группу захвата в результат.

const html = `<div>
  <div><strong>Heading</strong></div>
  <div>Some other content<div>
  <div><strong>Heading Title 2</strong></div>
  <div>Some more content</div>
</div>`;

const new_html = html.replace(/<div><strong\b[^>]*>(.*?)</strong></div>/g, '<div class = "heading">$1</div>');
console.info(new_html);

Обратите внимание, что это плохой подход, если вы пытаетесь обновить DOM всего документа. Замена всего HTML приведет к отбрасыванию любого динамического состояния, такого как пользовательский ввод, прослушиватели событий, поскольку весь HTML повторно анализируется с нуля. Лучше использовать методы элемента DOM, как в ответе @GetOffMyLawn.

30.05.2019 23:36