Parsing rich text into plain text via JS
HTML
<div class="editable">
</div>
<button id="get_text">Get Text</button>
<label>Rich Text Version:</label>
<div id="destination-rt">
</div>
<label>Plain Text Version</label>
<div id="destination-pt">
eat me
</div>
CSS
.editable {
-webkit-user-modify: read-write;
padding:10px;
margin:10px;
border:2px dashed #900;
outline:none;
}
label {
margin-top:10px;
display:block;
font-weight:bold;
}
#destination-rt, #destination-pt {
padding:10px;
margin:10px;
border:1px solid #000;
}
JavaScript
$("#get_text").click(function(){
var $editable = $(".editable");
var $destrt = $("#destination-rt");
var $destpt = $("#destination-pt");
var richTextVersion = $editable.html();
var semiRichText = richTextVersion.replace(/<br(\/)?>/ig, '\r\n');
var plainTextVersion = $("<div></div>").html(semiRichText).text();
plainTextVersion = plainTextVersion.replace(/^(\r\n|\n)*|(\r\n|\n)*$/ig, "").replace(/\r\n|\n/ig, "<br/>");
$destrt.text(richTextVersion);
$destpt.text(plainTextVersion);
});
document.execCommand("styleWithCSS", true);
$(".editable").on("keypress", function(e){
if (e.which === 13){
e.preventDefault();
e.stopPropagation();
document.execCommand("insertLineBreak");
}
})