Javascript 获取contenteditable div的某一行（即第一行）并替换它

对于textarea，它非常简单：

<textarea id='elememt'>
  1. Blah blah blah.
  <div>2. Header</div>
  3
</textarea>

var lines = $('textarea').val().split('\n');

alert(lines[0]; // show the first line "1. Blah blah blah."
alert(lines[2]; // show the third line "3"

哪个获取第一行，但如何获取第三行，依此类推？

您可以使用

.html（）

，

String.prototype.match（）

和

RegExp

/.*\n/g匹配一个或多个字符，包括换行符、

String.prototype.replace（）

，

Array.prototype.map（）

，

Array.prototype.join（）

返回原始匹配项，替换匹配行的选定索引处的字符串或部分字符串

给定问题中的

html

，由

.match（）

返回的数组中的第一个元素将是换行符；使用

3

匹配返回数组的第四个元素

$（）.ready（函数（））{
变量元素=$（“#元素”）；
var matches=element.html（）.match（/.*\n/g）；
console.log（匹配项）；
var第三行=匹配项[3]；
var replacement=“4”；
html（函数（i，html）{
返回matches.map（函数（_html，index）{
返回索引！=3？\u html:\u html.replace（/3/，replacement）
}).join（“”）
});
log（element.html（））；
});

1.废话废话。
2.标题
3.
这是可行的，但是如果我的DIV内容没有HTML元素会发生什么呢？它返回一个空白。另外，如何替换第三行？如果
div
不包含
html
元素，则可能会在
[0]处抛出错误。textContent
。您可以首先检查
.filter（）
返回的jQuery对象的
.length
，然后确定是否可以选择任何索引，以及索引的最大值<代码>if（third_line.length）{var max=third_line.length；if（2）只有当div元素没有其他非块元素时，这才有效：
编辑我
会使其失败。TLDR：即使它确实修复了OP的特定问题，也要尽量使其通用。不幸的是，所有浏览器在contenteditable元素中的新行都有不同的行为……例如，FF只会附加一个

元素，而chrome会将你的代码包在
元素中，我猜其他UAs会使用其他技巧，这会让我们很难知道实际内容是什么。
var first_line = $("#element")
                       .contents()
                       .filter(function() { 
                           return !!$.trim( this.innerHTML || this.data ); 
                       })
                       .first();