javascript - how to get properly formatted text value from a div - Stack Overflow

admin管理员组

文章数量:1310034

I am trying to get the formatted text from a contenteditable='true' div to send to my server.

I used to use a textarea and when you get the value of a textarea it preserves white space and line breaks, but when using a contenteditable div even when using styles such as the following I can not get the properly formatted text:

white-space: pre-wrap;
word-wrap: break-word;

For example if I type this into my div:

"a
 aa

asdf"

I will get this out with textContent:

"a aaasdf"

Is there any way to get formatted text out of a contenteditable div like a textarea?

I am trying to get the formatted text from a contenteditable='true' div to send to my server.

I used to use a textarea and when you get the value of a textarea it preserves white space and line breaks, but when using a contenteditable div even when using styles such as the following I can not get the properly formatted text:

white-space: pre-wrap;
word-wrap: break-word;

For example if I type this into my div:

"a
 aa

asdf"

I will get this out with textContent:

"a aaasdf"

Is there any way to get formatted text out of a contenteditable div like a textarea?

• javascript
• html
• css

Share Improve this question Follow edited Dec 16, 2014 at 6:47 user4275591 asked Dec 16, 2014 at 6:44 DerekDerek 55611 gold badge77 silver badges2020 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Use .innerHTML to get the linebreaks too.

Readup: .innerHTML | MDN

Working Code Snippet:

document.getElementById('copy').addEventListener('click', function(){
  var text = document.getElementById('input').innerHTML;
  document.getElementById('output').innerHTML = text;
});

div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}

<div contenteditable='true' id="input">Enter something funny<br>;)</div>

<button id="copy">Copy Text</button>

<div id="output">Text will be copied here.</div>

Example from: Extracting text from a contentEditable div

function getContentEditableText(id) {
    var ce = $("<pre />").html($("#" + id).html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
}

Or:

$.fn.getPreText = function () {
    var ce = $("<pre />").html(this.html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
};

This require jQuery, though.

When you enter content into a contenteditable element, this auto-generates HTML nodes within the target element.so you need to access its .innerHTML property and treat the content as HTML, not plain text

You can access this HTML content using the .innerHTML property, or you can use .innerText, which returns plain text but preserves the formatting as shown in @Rahul Desai's answer and in this blog post:

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

If I enter

Hello
how

are you

into that div and then click the button, the console shows:

<p>Hello</p><p>how</p><p><br></p><p>are you</p>

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

本文标签： javascripthow to get properly formatted text value from a divStack Overflow