Is it possible to extract the plaintext from a contenteditable div, including newlines? The jQuery $.text() method strips out newlines, which I need. The solution can use jQuery.

Is it possible to extract the plaintext from a contenteditable div, including newlines? The jQuery $.text() method strips out newlines, which I need. The solution can use jQuery.

• javascript
• jquery
• html
• contenteditable

• I don't know how to do this, but I wouldn't be surprised if using <pre> or searching for answers that mention pre-formatted text will help you find a solution. – Wex Commented Jul 29, 2011 at 2:57
• Have you tried jquery $.html() ? – MAK Ripon Commented Jul 29, 2011 at 3:02
• 1 @Mak, that returns the formatted text. I don't want any html tags in it, but I do want newlines (which aren't in $.html) – penguinrob Commented Jul 29, 2011 at 3:08

3 Answers 3

Without using extra plugins or writing your own implementation, you can just use both the innerText and textContent attributes (which are equivalent to each other). textContent is supported in all major browsers except IE 6-8, which supports innerText.

var text = x.innerText || x.textContent

http://www.quirksmode.org/dom/w3c_html.html#t07

EDIT: as AgentME points out, this won't preserve the user's whitespace in Firefox. To do that with contenteditable, you'd have to polyfill innerText on Firefox. There are a couple of options I could come up with:

1. Start with x.innerHTML, strip out the extra markup whitespace/tags and convert the user's whitespace from <br> and   to \n and spaces.
2. Use Firefox's Selection and Range support. Firefox supports Selection.toString which has a similar behavior to innerText, but it only works on the currently-selected text. So what you can do is record the user's current selection, change the selection to be the contents of your contenteditable div, call Selection.toString, then restore the user's initial selection.

Out of the two I personally think the second option would be better in most cases; with the first option you'll either get a quick-and-dirty regex solution or you devolve into implementing a full-blown HTML parser with CSS layout logic. The downside to option 2 is that it's relatively slow, so you may run into issues if you trigger it onchange or something like that. Demo of option 2 is here.

More info:

• Mozilla API docs for Selection
• Speed test of innerText vs Selection.toString

With a bit of tweaking, https://github.com/vorushin/jsHtmlToText was just what I needed.

There's no easy, cross-browser way. innerText does what you want in some (but not all) browsers. Setting the selection to encompass the editable element and calling toString() does what you want in a different collection of browsers. In short, there's no easy way: you need to traverse the DOM and add line breaks in as appropriate for <br> and block-level elements. I certainly wouldn't recommend using any regex-based solution, such as the one you seem to have settled on, because it can never work for all possible HTML.

Self-promotion: I will be adding this to my Rangy library in the reasonably near future.