Get a certain line (ie. first) of a contenteditable div and replace it

Question

With textarea it is quite straightforward:

<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"

But how do I do the same with a contenteditable DIV?

I've looked at this:

var first_line = $("#element")
                       .contents()
                       .filter(function() { 
                           return !!$.trim( this.innerHTML || this.data ); 
                       })
                       .first();

Which gets the first line but how do I get the third line and so on?

Answer 1

You can use .html(), String.prototype.match() with RegExp /.*\n/g to match one or more characters including newline character, String.prototype.replace(), Array.prototype.map(), Array.prototype.join() to return original matches, replacing string or part of string at selected index of matched lines.

Given html at Question, the first element within the array returned by .match() will be a newline character; use 3 to match fourth element of returned array.

$().ready(function() {
  var element = $("#element");
  var matches = element.html().match(/.*\n/g);
  console.log(matches);
  var third_line = matches[3];
  var replacement = "4";
  element.html(function(i, html) {
    return matches.map(function(_html, index) {
     return index != 3 ? _html : _html.replace(/3/, replacement)
   }).join("")
  });
  console.log(element.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  
</script>
<div id='element'>
  1. Blah blah blah.
  <div>2. Header</div>
  3
</div>