笔记功能，换行符和无内容

Question

我正在构建功能以在我的Web应用程序上做笔记。 我遇到两个问题：

我不知道如何识别换行符。 我可以使用换行符对文本进行加粗，但是当用户单击“ Edit它会在文本上显示<br> ，如果他保存了该文本，则会以纯文本形式显示<br> 。

同样，如果用户删除所有文本并单击“保存”，则该文本将不起作用，仅显示<textarea> 。

任何帮助是极大的赞赏！

 $('#edit').click(function() { $('#edit').hide(); $('#note').each(function() { var content = $(this).html(); $(this).html('<textarea style="width:inherit">' + content + '</textarea>'); }); $('#save').show(); }); $('#save').click(function() { $('#save').hide(); $('textarea').each(function() { var content = $(this).val(); //.replace(/\\n/g,"<br>"); $(this).html(content); $(this).contents().unwrap(); }); $('#edit').show(); }); 

 #note { word-wrap: break-word; max-width: 40rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-6"> <h5 class="card-tittle">Note</h5> <hr> <div class="container index"> <div class="row"> <div class="jumbotron col-md-12" id="note"> Test Text. </div> <div class="col-md-12"> <button class="btn btn-primary" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</button> <button class="btn btn-primary" id="save"><span class="glyphicon glyphicon-save"></span>Save</button> </div> </div> </div> </div> 

Answer 1

我想你想做这样的事情...

$('#edit').click(function() {
  $('#edit').hide();
  $('#note').each(function() {
    var content = $(this).html().replace(/<br>/g,"\n");
    $(this).html('<textarea style="width:inherit">' + content + '</textarea>');
  });
  $('#save').show();
});

$('#save').click(function() {
  $('#save').hide();
  $('textarea').each(function() {
    var content = $(this).val().replace(/\n/g,"<br>"); //.replace(/\n/g,"<br>");
    $(this).html("");
    $(this).append(content);
    $(this).contents().unwrap();
  });
  $('#edit').show();
});

演示： https ： //www.codeply.com/go/hAL9pWWUFk