从 html 模板字符串中删除额外的元素答案

【问题标题】：Remove extra elements from html template string从 html 模板字符串中删除额外的元素
【发布时间】：2020-02-03 11:51:57
【问题描述】：

我有一个 html 模板，我想通过 JS 从中删除多余的 。
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>
`

【问题讨论】：

到目前为止你有什么尝试？
为什么输出中有空的？您不想连续多个空p？
从结果中我可以看到另外两个那些我不是多余的？
@NicolaeMaties，你是对的
您可以使用DOMParser 将字符串转换为文档对象，然后循环遍历子元素

标签： javascript html replace domparser

【解决方案1】：

您可以使用正则表达式来搜索和删除不需要的。您可以使用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);

【讨论】：

很好的答案！我也认为{1,}可以在你的正则表达式中替换为+。