JSFiddle - React, Tailwind, and code Playground

by sathyamoorthi

HTML

<div id="div-editable" contenteditable>
    <div style="cursor: text">this inner div is needed to make it work proper in IE</div>
</div>

<input style="margin-top: 10px" type="button" value="ParseDIVText" onclick="ParseDIVText()"/>

CSS

#div-editable
{
    -moz-appearance: textfield-multiline; 
    font: medium -moz-fixed;
    font: -webkit-small-control;
    font-size: 13px;
    overflow: hidden;
    min-height: 200px;
    width: 99%;
    border: solid 1px #5E54EF;
}

#div-editable div
{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

JavaScript

function ParseDIVText()
{
    //NOTE: TYPE MORE TEXT WITH ENTER KEY IN THE EDITABLE DIV TO BETTER UNDERSTAND THIS PROBLEM.
    
    
    //QUESTION: my solution is working in firefox and chrome but not in IE.
    var domString = $("#div-editable").html();
    
    domString = domString.replace(/<div style="cursor: text">/g, "<br>").replace(/<\/div>/g,"");
    
    alert(domString);
    //
    
    
    //answer that was given by Laoujin at stackoverflow is not working....
    var innerDOM = $("#div-editable").clone();       
    
    innerDOM.find("div[style='cursor: text']").unwrap().append("<br>");                                                
                                                 
    alert(innerDOM.html());
    //
    
    //FINAL ANSWER
    var domString = "", temp = "";
    
    $("#div-editable div").each(function()
                {
                    temp = $(this).html();
                    domString += "<br>" + ((temp == "<br>") ? "" : temp);
                });
    
    alert(domString);
}