Extracting text from a contentEditable div

by

Unfortunately you do still have to handle this for the pre case individually per-browser (I don’t condone browser detection in many cases, use feature detection…but in this case it’s necessary), but luckily you can take care of them all pretty concisely, like this:

var ce = $("<pre />").html($("#edit").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");

var textWithWhiteSpaceIntact = ce.text();

You can test it out here. IE in particular is a hassle because of the way is does &nbsp; and new lines in text conversion, that’s why it gets the <br> treatment above to make it consistent, so it needs 2 passes to be handled correctly.

In the above #edit is the ID of the contentEditable component, so just change that out, or make this a function, for example:

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();
}

You can test that here. Or, since this is built on jQuery methods anyway, make it a plugin, like this:

$.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();
};

Then you can just call it with $("#edit").getPreText(), you can test that version here.

More Related Contents:

  1. JS hide function error
  2. Get the longest text in HTML document using Jquery or javascript
  3. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  4. Javascript counting all the characters from a HTML document
  5. JSFiddle code not working in my own page
  6. How to disable scroll without hiding it?
  7. jQuery: Get selected element tag name
  8. How to dynamically create ‘@-Keyframe’ CSS animations?
  9. Infinity Loop Slider Concepts
  10. Text blinking jQuery
  11. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  12. jQuery vs document.querySelectorAll
  13. How to ONLY trigger parent click event when a child is clicked
  14. jQuery Validation using the class instead of the name value
  15. How can I detect when a new element has been added to the document in jquery?
  16. JavaScript Loading Screen while page loads
  17. How to disable elements selection and resizing in contenteditable div?
  18. Change text color based on brightness of the covered background area?
  19. jQuery – Sticky header that shrinks when scrolling down
  20. Show text letter by letter
  21. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  22. Remove scrollbar but not scrolling functionality [duplicate]
  23. Retain scrollbar position even after reloading using javascript
  24. Gaussian Blur onHover Using jQuery
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. fade effect using javascript no jquery?
  27. Wrapping lists into columns
  28. How to customize the position of an alert box
  29. Showing Placeholder text for password field in IE
  30. Possible to reverse a css animation on class removal?

Leave a Comment