javascript - 在 "\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>