在javascript中替换重复的html-tags

Question

我正在使用quill.js编辑器来允许用户编写注释。 quill.js的问题是，如果按Enter键，则会生成一个新的paraph。

<p><br></p>

这允许他们创建无限的新行。例如输入：

fffff ffff fff
fff


fffffff



ff

会生成这个HTML：

<p>fffff ffff fff</p>
<p>fff</p>
<p><br></p>
<p><br></p>
<p>fffffff</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>ff</p>

但是我希望得到这样的结果：

<p>fffff ffff fff</p>
<p>fff</p>
<p><br></p>
<p>fffffff</p>
<p><br></p>
<p>ff</p>

因此，如果重复换行代码，则应将其替换为单个新行。我该怎么做呢？

Answer 1

您可以检查是否有两次或更多次出现的<p><br></p>后跟一个新行，如果是，则将其替换为单个，如下所示：

const markup = `
<p>fffff ffff fff</p>
<p>fff</p>
<p><br></p>
<p><br></p>
<p>fffffff</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>ff</p>
<p><br></p>
`;

const result = markup.replace(/(<p><br><\/p>\n){2,}/g, '<p><br><\/p>\n');

console.log(result);

你甚至可以：

const markup = `
<p>fffff ffff fff</p>
<p>fff</p>
<p><br></p>
<p><br></p>
<p>fffffff</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>ff</p>
<p><br></p>
`;

const target = '<p><br><\/p>\n';

const result = markup.replace(new RegExp(`(${target}){2,}`, 'g'), target);

console.log(result);

因此，您可以在将来轻松更改元素。

Answer 2

如果你真的没有其他选择，那么你可以这样做：

function cleanupHtml() {
  document.body.innerHTML = document.body.innerHTML.replace(/<p><br><\/p>/gi, '');
}

document.addEventListener('DOMContentLoaded', cleanupHtml);

<p>fffff ffff fff</p>
<p>fff</p>
<p><br></p>
<p><br></p>
<p>fffffff</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>ff</p>