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>