Потеряно HTML-кодирование при чтении атрибута из поля ввода

Для тех, кто предпочитает использовать чистый JavaScript, вот метод, который я использовал с успехом:

function escapeHTML(str) {
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

Этот код создает временный элемент <div>, добавляет текстовое содержимое в виде текстового узла и затем возвращает безопасный HTML, экранируя специальные символы.

Хороший ответ. Обратите внимание, что если значение для кодирования равно undefined или null в jQuery 1.4.2, вы можете столкнуться с ошибками, такими как:

jQuery("<div/>").text(value).html is not a function

или

Uncaught TypeError: Object has no method 'html'

Решение заключается в том, чтобы модифицировать функцию так, чтобы она проверяла наличие действительного значения:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Таким образом, функция будет корректно обрабатывать случаи, когда значение не задано.

На мой взгляд, кодировка не теряется. Она используется парсером разметки (браузером) во время загрузки страницы. Как только источник прочитан и разобран, а DOM загружен в память браузера, кодировка преобразована в то, что она представляет. Таким образом, когда ваш JavaScript выполняется для чтения чего-либо в памяти, символ, который он получает, соответствует тому, что представляла кодировка.

Возможно, я застрял на семантике, но хотел, чтобы вы поняли назначение кодировки. Слово "потеряна" создает впечатление, что что-то работает неправильно.

Если вы хотите сделать код для экранирования символов в строке быстрее без использования jQuery, вы можете закодировать каждый символ в вашей строке следующим образом:

function encode(e) {
    return e.replace(/[^]/g, function(e) {
        return "&#" + e.charCodeAt(0) + ";"
    });
}

Однако, если вас беспокоят только основные специальные символы (такие как &, новые строки, <, >, " и '), вы можете нацелиться только на них:

function encode(r) {
    return r.replace(/[\x26\x0A\<>'"]/g, function(r) {
        return "&#" + r.charCodeAt(0) + ";"
    });
}

test.value = encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML = test.value;

/*************
* \x26 – это символ & (он должен быть первым),
* \x0A – это символ новой строки,
*************/

Вот HTML-код для тестирования:

<textarea id=test rows="9" cols="55"></textarea>
<div id="testing">www.WHAK.com</div>

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

Согласно моим знаниям, в JavaScript нет прямого метода для кодирования/декодирования HTML.

Тем не менее, вы можете создать произвольный элемент с помощью JavaScript, установить его текст, а затем прочитать его с помощью свойства innerHTML.

Например, с использованием jQuery это будет выглядеть так:

var helper = $('<div>').hide().appendTo('body').text('chalk & cheese');
var htmled = helper.html();
helper.remove();

Или что-то в этом роде.