javascript - 笔记功能、换行符和无内容

Question

我正在构建在我的网络应用程序上做笔记的功能。我遇到了两个问题:

我不知道如何识别换行符。我可以使用换行符的核心文本，但是当用户单击 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