Question

我试图找到一个与多个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

Answer 1

您使用的正则表达式应该起作用。您可以使用$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的答案。

Answer 2

使用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>

RegEx用于替换多个HTML标签

当前HTML

所需的HTML

2 个答案: