如何从 contentEditable div 中获取所需的 html

Question

$('#parent').on('input', function(){
  let a = $(this).html();
  console.log(a);
});

.parent{
  background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent' id='parent' contentEditable>
  lorem ipsum
</div>

将光标置于文本末尾并按 Enter。
在控制台中，我只期待 <br> 而不是打开和关闭 div 标签。

现在，假设我想要一条水平尺。输入 <hr>
结果 - <div><hr></div>

当然，当我将此值放入数据库 (php、mysql) 并取回此数据时 - 没有水平线，只有 <hr> 标签字面意思。

如何像这样获得想要的 html：

<br>  
<hr>

Answer 1

是这样的吗？

$(function() {
  $('#parent').on('input', function() {
    // Retrieve the HTML-decoded content and log it
    let content = $('<textarea>')
      .html($(this).html())
      .text().trim()
      .replace(/<br><br>$/, '<br>');
    console.log(content);
  });

  $('#parent').on('keydown', function(e) {
    // Catch Enter key and insert <br>'s manually
    if (e.which === 13) {
      document.execCommand('insertHTML', false, '<br><br>');
      e.preventDefault();
    }
  });
})

.parent {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="parent" contenteditable>
  lorem ipsum
</div>

如何从 contentEditable div 中获取所需的 html

How to get desired html from a contentEditable div

html

jquery

contenteditable