JQuery使用正则表达式删除contenteditable div中的多个<p>

Question

我正在尝试使用jquery regex为我的contenteditable div删除多个

。但我这里有一个问题。所以我在这个 DEMO 中尝试过。

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

我不想允许：

    Hi



    Bro



    How are you




   thanks

我想这样做：

Hi

Bro 

How are you
thanks

所以这是我的代码：

＆＃13;

＆＃13;

$(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;
   });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

如果你的<p>实际上是空的，那么......就可以胜任。但是，看起来它们不是（它们包含<br /> s）。

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

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;