替换 javascript 中重复的 html 标签

replace repeating html-tags in javascript

我正在使用 quill.js 编辑器来允许用户写评论。 quill.js 的问题是,如果他们按回车键,就会生成一个新的段落。

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

所以如果换行代码重复,应该换成一个新行。我该怎么做?

如果你真的别无选择,那么你可以这样做:

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>

您可以检查 <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);

这样您以后就可以轻松更改元素了。