RegEx用于替换多个HTML标签

Question

I am trying to find a regex that will match multiple html tags, exclude the content in between so that the wrapping tags can be replaced by a different html tag. This replacement needs to work on a large HTML document where there are many instances of the same <div><strong>...</strong></div> format.

Current 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>

Desired 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>

I've managed to find a regex that will match the full string but am unsure how to exclude the Heading content and then how to best replace the outer tags.

The best regex I have so far is: /<div><strong\\b[^>]*>(.*?)<\\/strong><\\/div>/g

Answer 1

The regexp you use should work. You can use $1 to copy the capture group to the result.

 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); 

Note that this is a bad approach if you're trying to update the DOM of the entire document. Replacing all the HTML will discard any dynamic state, such as user inputs, event listeners, since all the HTML is re-parsed from scratch. It's better to use DOM element methods, as in @GetOffMyLawn's answer.

Answer 2

Use replaceWith to replace the div with a newly formatted 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>