получить первую строку div ContentEditable

Question

$('.btn').click(function(){
let arr = $('#parent').html().split('\n');
let first = arr[0];
console.log(first);
});

.parent{
background:gold;
min-height:99px;
}

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

<div class='parent' id='parent' contentEditable></div>
<br>
<button class='btn'>CLICK</button>

Пожалуйста, введите любой многострочный текст внутри parent.

Первая строка (или блок) должна быть разделена на Enter (keycode 13).

Мне нужна только первая строка в консоли.

Итак, нажмите btn.

Результат: весь HTML .

Кстати, почему первая строка без тегов div?

Answer 1

Чтобы получить первую строку Div, вы можете использовать:

var text = $('#parent').clone().children().remove().end().text();

Демо

$('.btn').click(function() {
  var text = $('#parent').clone().children().remove().end().text(); // get text
  console.log(text);
});

.parent {
  background: gold;
  min-height: 99px;
}

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

<div class='parent' id='parent' contentEditable></div>
<br>
<button class='btn'>CLICK</button>

Answer 2

Измените ваш сплит на split('<div>') вместо \n.Вы также можете удалить все  , которые будут добавлены в текст contentEditable:

$('.btn').click(function() {
  let arr = $('#parent').html().split('<div>');
  let first = arr[0].replace(/&nbsp;/g,'');
  console.log(first);
});

.parent {
  background: gold;
  min-height: 99px;
}

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

<div class='parent' id='parent' contentEditable></div>
<br>
<button class='btn'>CLICK</button>