从 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>)+/ig, '<p></p>');

console.log(ret);

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

Remove extra elements from html template string

html

javascript

replace

domparser