get the text content from a contenteditable div through javascript

Question

I want retrieve the text content from a contentEditable div through javascript. What are the options of doing this? I've tried innerHTML but it doesn't work.

If you're serious about getting help then please post and example of what you're trying to do or a test case for us to use to solve the problem.. — donohoe, Aug 29 '10 at 05:24

score 57 · Answer 1 · edited Feb 07 '17 at 05:31

57

Why not use textContent for this:

var contenteditable = document.querySelector('[contenteditable]'),
    text = contenteditable.textContent;

http://jsfiddle.net/E4W8y/1/

edited Feb 07 '17 at 05:31

ThisClark

14,352
10
69
100

answered May 16 '13 at 09:26

Mircea

11,373
26
64
95

24

Because textContent doesn't respect newlines (in chrome at least) – B T Feb 24 '17 at 02:22

score 33 · Answer 2 · answered Feb 24 '17 at 02:35

33

Unfortunately, I've found that innerText is the only way to preserve newlines in contenteditable dom nodes. What I'm doing (tested only in chrome at the moment) is this:

 var innerText = editableDiv.innerText  // using innerText here because it preserves newlines
 if(innerText[innerText.length-1] === '\n') 
     innerText = innerText.slice(0,-1)             // get rid of weird extra newline
 return innerText

answered Feb 24 '17 at 02:35

B T

57,525
34
189
207

3

This should be the accepted answer while not using jQuery. BTW, I use `trim()` to get rid of starting and trailing blanks. – Sony Santos Dec 22 '17 at 10:18
4

On Chromium 78 and Firefox 71, when I type `ab` on the div, I get `a\n\n\nb` (3 newlines rather than the expected 2). Is this expected? Is there a way to work around it? [Test program](https://github.com/cirosantilli/cirodown/blob/3473e7f1c5941c3cd3f879185e44edecab136615/editor.html#L52) with [this patch](https://github.com/cirosantilli/cirodown/issues/2). – Ciro Santilli OurBigBook.com Dec 27 '19 at 23:46
2

@CiroSantilli郝海东冠状病六四事件法轮功 you're the only acknowledgement of this problem I can find. N line terminators become 2N-1 line terminators. My desperate workaround: `string.replace(/\n\n/g, '\n')`. Unfortunately it's not consistent. This almost-doubling crime happens on _typed_ newlines, not _pasted_ newlines. – Bob Stein Aug 31 '20 at 16:29
@BobStein yeah, I just gave up on this and moved to a proper Js editor like Monaco: https://microsoft.github.io/monaco-editor/ – Ciro Santilli OurBigBook.com Aug 31 '20 at 17:32
1

@CiroSantilli郝海东冠状病六四事件法轮功 wow what an editor, Microsoft does a few things right. For current works I don't even need markup. But I get the sense contenteditable is a sinking island. – Bob Stein Aug 31 '20 at 19:39
textContent from the other answers seems better if you don't need multiline as innerText seems to also return , double spaces and such – Guy Oct 21 '22 at 14:30

score 7 · Answer 3 · edited May 16 '13 at 09:10

7

lblMailContent is the id of editable field.

var details= document.getElementById("lblMailContent").innerHTML;

Put this code in clientClick. It worked well for me.

edited May 16 '13 at 09:10

enb081

3,831
11
43
66

answered May 16 '13 at 08:49

user2028956

81
1
6

score 6 · Accepted Answer · edited May 23 '17 at 12:34

6

use jQuery and do

var content = $('#my-contenteditable-div').html();

also look up these links:

http://west-wind.com/Weblog/posts/778165.aspx

Extracting text from a contentEditable div

edited May 23 '17 at 12:34

Community

1
1

answered Aug 29 '10 at 05:27

Moin Zaman

25,281
6
70
74

57

really no need for jQuery here. – drewish Nov 12 '13 at 05:04
Will include HTML for new lines – gphilip Apr 20 '16 at 19:26
will include all html in general – colin rickels Feb 08 '18 at 20:01

holysmoke · Answer 5 · 2016-05-12T10:31:33.113

3

I solved it this way, because i need html-input:

message = $('<div>').html(
   $('#area').html()
   .replace(/<(div|p|br)[^<]*?>/g, '&lt;br /&gt;')
   .replace(/<([(i|a|b|u)^>]+)>(.*?)<\/\1>/gim,
      function(v) { return '' + escape(v) + ''; })
).text();

Allows the tags A, B, I, U and replaces Divs and Ps with BRs

edited May 12 '16 at 10:31

answered May 12 '16 at 08:46

holysmoke

41
2

4

Are you sure you want to parse HTML with regexps? – Emil Stenström Oct 09 '16 at 17:46

score 2 · Answer 6 · answered Dec 04 '19 at 20:43

Use this:

function textFromDiv(selector) {
  const element = document.querySelector(selector);
  const text = element.html().replace(/<div>/g,"\n").replace(/<\/div>/g,"").replace(/<br>/g,"\n");
  return text;
}```

score 1 · Answer 7 · answered May 22 '15 at 10:49

1

Using text content, working fine in most of the cases Working Example: jsfiddle(verified in Safari)

answered May 22 '15 at 10:49

Rakesh

31
1
3

score 1 · Answer 8 · answered Sep 06 '21 at 19:00

Here's my spin at it...

input = document.getElementsByTagName("div")[0];

input.onkeyup = function(){
    text = "";
    for(i=0; i<input.childNodes.length; i++){
        text += input.childNodes[i].textContent + "\n";
    }
    text = text.trim();
    console.log(text);
}

James Prentice · Answer 9 · 2022-08-08T09:26:39.247

1

Vanilla JS solution

html:

<div 
  contenteditable="true"
  onkeyup="myFunction(this, event)"
></div>

js:

function myFunction(self, event){
  console.log(self.innerText) 
  console.log(event)
}

edited Aug 08 '22 at 09:26

answered Aug 08 '22 at 08:14

James Prentice

134
1
6

get the text content from a contenteditable div through javascript

9 Answers9

Linked

Related