跨浏览器获取contenteditable内容的方法

Question

Different browsers generate the elements inside contenteditable differently. It's especially obvious when you have line breaks, or paste multi-line stuffs in.

In the old days with textarea , you can simply do $('textarea').val() to retrieve the content inside, and it's reliable and cross-browser compatible.

I wonder is there such universally-agreed method to retrieve content inside a contenteditble as well, such that it's striped off html tags, and lines are properly separated by \\n . If not, how does Facebook messenger do it reliably? Do you need a complicated algorithm with browser detection?

Answer 1

One way to do it would be this:

 var content = document.querySelector('[contenteditable]').textContent

The jury's still out on whether it's universally agreed upon because you would probably have to account for differences between browsers regarding newlines and what not.