获取 contentEditable 的第一行 div

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

更改拆分以使用 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>

Answer 2

要获取 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>

获取 contentEditable 的第一行 div

get the first line of a contentEditable div

html

jquery

contenteditable