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的第一行

2 个答案: