Кодировать текст в элементах HTML

Мне нужно иметь возможность кодировать текст элемента HTML, а также заменять двойные кавычки в тегах HTML на одинарные.

Например:

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

Станет:

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

Я хочу, чтобы двойные кавычки исчезли, в основном, поскольку я передаю строку HTML (как указано выше) в атрибут value ввода.

Я не могу просто избежать всех двойных кавычек в HTML, поскольку мне нужно, чтобы он был помещен в DOM как есть.

Мой текущий метод (ниже) работает только наполовину, и он мне просто не нравится; он неэффективен и работает только наполовину (по какой-то причине он не меняет некоторые двойные кавычки, помещенные в тег).

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;"));
}

Я хотел бы иметь возможность извлекать HTML прямо из базы данных и помещать в DOM без синтаксического анализа с помощью Javascript для первого декодирования.

Любая помощь очень ценится, и, пожалуйста, дайте мне знать, если я что-то не понимаю.

Ссылка на JSFiddle: http://jsfiddle.net/2sv5g9wu/1/