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

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

0 голосов
/ 31 мая 2019

Я пытаюсь найти регулярное выражение, которое будет соответствовать нескольким тегам 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

Ответы [ 2 ]

2 голосов
/ 31 мая 2019

Используемое регулярное выражение должно работать. Вы можете использовать $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.log(new_html);

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

1 голос
/ 31 мая 2019

Используйте replaceWith , чтобы заменить 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>
...