jQuery删除多个 <p> 在使用regex的contenteditable div中

Question

我正在尝试删除多个

使用jQuery正则表达式为我的contenteditable股利。 但是我这里有一个问题。 所以我已经在这个DEMO中尝试过了。

在此演示中，如果您按Enter键，那么我的js代码不允许创建段落，但是如果用户创建树时间为空段落，我只想删除。

我不想允许：

    Hi



    Bro



    How are you




   thanks

我想这样做：

Hi

Bro 

How are you
thanks

所以这是我的代码：

 $(document).ready(function() { $("body").on("keyup", ".text", function() { var item = document.getElementsByClassName("text")[0]; var text = item.innerText || item.textContent; // var text = $(".text").text(); text = text.replace(/<[\\/]{0,1}(p)[^><]*>/gi, ' '); document.getElementsByClassName("text")[0].innerHTML = text; }); }); 

 .text { position:relative; width:100%; max-width:500px; margin:0px auto; padding:30px; border:1px solid #d8dbdf; margin-top:50px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } .text[contentEditable=true]:empty:not(:focus):before { content:attr(placeholder); color: #444; } * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text" contenteditable="true" placeholder="Write something with tree times enter"></div> 

Answer 1

p:empty + p:empty + p:empty { display: none; }

...如果您的<p>实际上是空的，将会做的。 但是，它们似乎不包含（它们包含<br /> ）。

因此，可能更好的选择是使用一个将文本转换为html的函数，检查是否出现3个空段落，删除第三个：

 function removeThirdParagraph() { let clone = $('.text').clone(); clone.html($('.text')[0].innerHTML); let ps = clone.find('p'); ps.each(function(i,e){ if ($(e).is('p + p + p') && isEmptyP(ps.eq(i - 2)) && isEmptyP(ps.eq(i - 1)) && isEmptyP(ps.eq(i))) { e.remove(); } }); // you probably want $('.text').text(clone[0].innerHTML) $('.text').html(clone[0].innerHTML) } function isEmptyP(p){ return p.text().replace(/(?:\\r\\n|\\r|\\n|\\s)/g, '').length == 0; } removeThirdParagraph(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> test </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> <br /> <br /> <br /> </p> <p>another test</p> <p> <br /> </p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>...</p> </div>