Javascript - 替换 CMS 格式内容 Pt. II 中的标签

Question

>我正在处理一个格式化文本块的CMS，如下所示：

<p id="V01-cntntTxt"> Lorem ipsum dolor sit amet， consectetur adipiscing 埃利特。<br> Vivamus lacus ipsum， semper non consequat eu， facilisis at 莱克图斯。Vestibulum et magna ac <br> odio semper porttitor lacinia 康格·奥尔奇。Vivamus suscipit eleifend dolor， in hendrerit <br> turpis 必比登<br><br> Morbi interdum augue et nisl ullamcorper sit Amet Ornare <br> Lorem Tempus。Duis nec nisi quis ipsum pulvinar 沃鲁帕特。Suspendisse venenatis malesuada metus，
nec pretium dui 诅咒。Donec vitae lorem vitae risus dapibus malesuada congue 维尔·努克。</p>

使用此 CMS 的公司已将使用 SHIFT+Enter x 2（表示段落分隔符）和单个 Shift+Enter 作为换行符作为标准做法。我无法修补或更改 CMS 的工作方式。

这是所需的结果：

<p id="V01-cntntTxt"> Lorem ipsum dolor sit amet， consectetur adipiscing elit.维瓦姆斯 Lacus ipsum， semper non consequat EU， facilisis at lectus.前庭 et magna ac odio semper porttitor lacinia congue orci.维瓦姆斯 Suscipit eleifend dolor， in hendrerit turpis bibendum ut.</p><p>莫尔比 Interdum augue et nisl ullamcorper sit amet ornare lorem tempus.杜伊斯 NEC nisi quis ipsum pulvinar volutpat.Suspendisse venenatis malesuada Metus， nec pretium dui cursus eget.Donec vitae lorem vitae risus Dapibus malesuada congue vel nunc.</p>

我需要将双<br><br>标签替换为结束和开始</p><p>标签以保持段落分隔符，然后删除任何剩余的用于换行符的单<br>标签。

我试过这个，它几乎有效：

<script>
$('#V01-cntntTxt').html($('#V01-cntntTxt').html().replace(/<br><br>/g, '</p>'));
$('#V01-cntntTxt').html($('#V01-cntntTxt').html().replace(/<br>/g, ' '));
</script>

但是，结果最终以空段落结束。中间的两个</p></p>标签是向后的。它应该是</p><p>而不是<p></p>.似乎正在插入一个开始标签，即使我没有指定它应该插入。

这是上述脚本的结果，标签向后：

<p id="V01-cntntTxt"> Lorem ipsum dolor sit amet， consectetur 阿迪皮斯汀·埃利特。Vivamus lacus ipsum， semper non consequat eu， 莱克图斯的设施。Vestibulum et magna ac odio semper porttitor 拉西尼亚·康格·奥奇。Vivamus suscipit eleifend dolor， in hendrerit 比比登<p></p> 莫尔比·乌格和乌兰科珀 坐着 Amet Ornare lorem Tempus。Duis nec nisi quis ipsum pulvinar 沃鲁帕特。Suspendisse venenatis malesuada metus， nec pretium dui 诅咒。Donec vitae lorem vitae risus dapibus malesuada congue 维尔·努克。</p>

Answer 1

似乎

替换<p>标签中的innerHTML并没有根据需要创建新的<p>标签，因此您应该显式创建一个并将内容拆分为新的<p>标签。 为此，我们将使用 string.split 将字符串的内容拆分为一个数组，并为每个数组索引创建一个新的 <p> 标记：

var par = $('#V01-cntntTxt'); // our first tag
var splits = par.html().split("<br><br>"); // using the first tag to get the array
par.html(splits[0].replace(/<br>/g, " ")); // handling the first index
splits.splice(0, 1) // deleting the first index so it doesnt happen twice
splits.forEach(function(str){ // iterating through the array of strings
    var nPar = $("<p></p>"); // a new <p> tag
    nPar.html(str.replace(/<br>/g, " ")); // removing single <br>s from it
    nPar.insertAfter(par);
    par = nPar; // if another is found it will insert after this
})

这里还有一个演示。