在“ \ n”和“ <br/>”之间切换

Question

#comment

的内容

  <p id="comment">
    Here<br>
    it<br>
    is
  </p>

  <button id="view">Edit</button>

用户应该使

可编辑，并且换行符<br>应当切换为文本区域的\n。

用户对其进行编辑后，应将换行符再次切换为<br>。

我希望这能解决问题：

$(document).on("click","#view",function() {
   var $comment = $('#comment');
   var $content = $comment.text().trim().replace("<br>", "\n",  "g");       
   $comment.replaceWith("<textarea name='text' id='textarea'>" + $content + "</textarea>");   
   $('#view').replaceWith('<button id="save">Save</button>');    
});

$(document).on("click","#save",function() {
   var $content = $('#textarea').val().replace(/\n/g, "<br />");
   $('#textarea').replaceWith("<p id='comment'>" + $content + "</p>");
   $('#save').replaceWith('<button id="view">Edit</button>');
});

如果单击编辑->保存，则一切似乎正常。但是，如果再次点击编辑，则换行符消失了：

这里是jFiddle。

按两次按钮后换行符在哪里？

Answer 1

代码：

var $content = $('#textarea').val().replace(/(\n)/g, "$1<br />");

为什么行得通？

您实际上是用<br/>替换换行符-但您忘记了textarea 需要确定换行符是否中断线。您正在执行单向转换，此后原始文本格式不正确。不用替换换行符，只需在该行的末尾添加<br />。

或者，您可以编写代码，以在进入<br />模式时用换行符替换edit，但是您不能使用.text来执行此操作，因为这只能捕获实际的文本，不是元素。

---

代码段：

// find elements
var banner = $("#banner-message")
var button = $(".pure")

$(document).on("click","#view",function() {
   var $comment = $('#comment');
   var $content = $comment.text().trim();  	
   $comment.replaceWith("<textarea name='text' id='textarea'>" + $content + "</textarea>");   
   $('#view').replaceWith('<button id="save">Save</button>');    
});

$(document).on("click","#save",function() {

// CHANGED LINE
   var $content = $('#textarea').val().replace(/(\n)/g, "$1<br />");
// ^^^

$('#textarea').replaceWith("<p id='comment'>" + $content + "</p>");
   $('#save').replaceWith('<button id="view">Edit</button>');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p id="comment">Here<br>
  it<br>
  is</p>
  <br>
  <button id="view">Edit</button>
</div>

Answer 2

另一个选择是使用分割/合并而不是替换。此答案还将\n添加到<br>的联接中以解决原始问题。

$(document)
  .on("click", "#view", function() {
    var $comment = $('#comment');
    var content = $comment.text().trim().split('<br>').join('\n');
    
    $comment.replaceWith("<textarea name='text' id='textarea'>"+ content +"</textarea>");
    $('#view').replaceWith('<button id="save">Save</button>');
  })
  .on("click", "#save", function() {
    var content = $('#textarea').val().split('\n').join('<br>\n');
    
    $('#textarea').replaceWith("<p id='comment'>"+ content +"</p>");
    $('#save').replaceWith('<button id="view">Edit</button>');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="comment">
    Here<br>
    it<br>
    is
  </p>

  <button id="view">Edit</button>