从html模板字符串中删除多余的元素

Question

_{也许这是一个相当普遍的问题。}

我有一个html模板，我想通过JS从其中删除多余的<p></p>。P.S。我不能有多个空的p

示例：

const htmlTemplate = `
  <p>Rich editor text</p>
  <p></p>
  <p></p> <-- Remove these extra elements
  <p>1.2.3</p>
  <p>test432</p>
  <p></p>
  <p></p> // <--
  <p>lorem</p>
  <p></p>
  <p></p>  // <--
  <p></p>  // <--
  <p>ipsum dolor amet</p>
`

结果：

const result = `
  <p>Rich editor text</p>
  <p></p>
  <p>1.2.3<br></p>
  <p>test432</p>
  <p></p>
  <p>lorem</p>
  <p></p>
  <p>ipsum dolor amet</p>
`

Answer 1

您可以使用正则表达式搜索并删除不需要的<p></p>。您可以使用https://regex101.com/获取正则表达式的详细信息

const htmlTemplate = `
  <p>Rich editor text</p>
  <p></p>
  <p></p>
  <p>1.2.3</p>
  <p>test432</p>
  <p></p>
  <p></p>
  <p>lorem</p>
  <p></p>
  <p></p>
  <p></p> 
  <p>ipsum dolor amet</p>`;

const ret = htmlTemplate.replace(/<p><\/p>([.\s]*<p><\/p>){1,}/ig, '<p></p>');

console.log(ret);