JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<div id='container'>
    <div id='commentBox' contentEditable>
        <div>foo</div>
        <p>line 1<br/> line2<br/><br/>line4\nline5</p>

    </div>
    <button id='saveButton'>SAVE</button>
</div>

CSS

div#container {
    margin: 0 auto;
    width: 80%;
}
div#commentBox {
    border: 1px solid #eee;
    padding: 4px;
}

JavaScript

var Comments = 'div#commentBox';
        var saveButton = 'button#saveButton';

        $(saveButton).click(function() {
            
            var updatedHTML = $(Comments).html();   
            var replacement = updatedHTML.trim()
                                .replace(/<br(\s*)\/*>/ig, '\n')
                                .replace(/<[p|div]\s/ig, '\n$0')
                                .replace(/(<([^>]+)>)/ig,"");

            alert(replacement + "\n---\n" + updatedHTML);
            
            /*$.ajax {
                // POST request here...
                }*/
        });