JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jqte_editor">
    
    Some text: "hello"
    <span style="color:#ff0000;">He said "Hi".</span>
    
</div>

<!-- <input type="hidden" name="myInput" /> -->
<!-- show the input for debugging -->
<textarea id="toUpdate" name="myVal"></textarea>

CSS

textarea {
    height: 400px;
    width:100%;
}
.jqte_editor {
    margin-bottom: 30px;     
}

JavaScript

var $editable = $("body").find(".jqte_editor");
var newVal = $editable.html();



// replace the double quotes inside HTML tags with single quotes.
var regex = new RegExp("<([^\/].*?(?=>))", "g");
var result;
while ((result = regex.exec(newVal)) !== null) {
    var match = result[0];
    newVal = newVal.replace(match, match.replace(/"/g, "'"));
}



// replace double quotes outside of HTML tags with &quot;
regex = new RegExp(">([^\/].*?(?=<))", "g");
result = null;
while ((result = regex.exec(newVal)) !== null) {
    var match = result[0];
    newVal = newVal.replace(match, match.replace(/\"/g, "&quot;"));
}



// update the input value
$("#toUpdate").val( newVal );