Encode Text Within HTML Elements

Question

I need to be able to encode the text of a HTML element, as well as, change double quotes within the HTML tags to single quotes.

For example:

<span style="color:#000;">He said "hello"</span>

Will become:

<span style='color:#000;'>He said &quot;hello&quot;</span>

I want for the double quotes to be gone, basically, as I am transferring the string of HTML (as above) to the value attribute of an input.

I can't simple escape all of the double quotes within the HTML as I need for it to be placed in the DOM as is.

My current method (below) only half works and I'm just not happy with it; it isn't efficient and only half works (for some reason it doesn't change some double quotes housed in a tag).

var newVal = $popup.find(".jqte_editor").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;"));
}

I would like to be able to pull the HTML directly from the database and place into the DOM without parsing through Javascript to decode first.

Any and all help is much appreciated and please let me know if I'm unclear anywhere.

Link to the JSFiddle: http://jsfiddle.net/2sv5g9wu/1/