Недопустимый HTML, нарушенная разметка и другие нежелательные побочные эффекты работы со строками HTML без надлежащего экранирования в Javascript — это проблема, с которой столкнулся по крайней мере 1 из каждых 5 веб-разработчиков (работающих с динамическими приложениями).
Сам Javascript не предоставляет нативных методов для работы с ним, в отличие от PHP (наш прекрасный серверный язык), который предлагает htmlentities, html_entity_decode а также html_entity_encode функции готовы к использованию.
Кодировать и декодировать все
Если вы один из тех психотических (как и я) разработчиков, которым не нравится добавлять огромную часть кода в свои проекты, вы можете использовать следующий фрагмент.
Этот кусок кода работает как обаяние в обоих направлениях, кодировать и декодировать. В качестве первого параметра он ожидает строку (декодированную или закодированную в соответствии с методом) и возвращает обработанную строку.
Он не обеспечивает слишком много настроек, но работает нормально (менее всего для того, чтобы иметь только пару строк). Обратите внимание, что метод кодирования преобразует каждый отдельный символ в его HTML-символ.
Если вы хотите заменить только те странные символы, которые сломали ваш HTML (, /, \ etc) продолжайте чтение и не используйте этот метод, в противном случае этот фрагмент пригодится.
(function(window){
window.htmlentities = {
/**
* Converts a string to its html characters completely.
*
* @param {String} str String with unescaped HTML characters
**/
encode : function(str) {
var buf = [];
for (var i=str.length-1;i>=0;i--) {
buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
}
return buf.join('');
},
/**
* Converts an html characterSet into its original character.
*
* @param {String} str htmlSet entities
**/
decode : function(str) {
return str.replace(/&#(\d+);/g, function(match, dec) {
return String.fromCharCode(dec);
});
}
};
})(window);Предыдущий код создает глобальную переменную (в окне) с именем htmlentities. Этот объект содержит 2 метода кодирования и декодирования.
Чтобы преобразовать обычную строку в ее html-символы, используйте метод encode:
htmlentities.encode("Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters.");
// Output
"Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."Чтобы преобразовать закодированную строку html в читаемые символы, используйте метод decode:
htmlentities.decode("Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters.");
// Output
"Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."Замечания : не стесняйтесь копировать каждую функцию и включать ее в свой проект по своему желанию.
Использование библиотеки
В качестве задачи, которую нелегко решить, есть отличная библиотека, которая решит эту проблему для вас.
He.js (для «сущностей HTML») - надежный кодер / декодер сущностей HTML, написанный на JavaScript. Поддерживает все стандартизированные именованные ссылки на символы согласно HTML, ручки неоднозначные амперсанды и другие крайние случаи так же, как браузер, имеет обширный набор тестов, и, в отличие от многих других решений JavaScript, он прекрасно обрабатывает астральные символы Юникода. Доступна онлайн-демонстрация.
шифровать
Эта функция принимает строку текста и кодирует (по умолчанию) любые символы, которые не являются печатными символами ASCII, и &, <, >,", ', а также `, заменяя их ссылками на символы.
// Using the global default setting (defaults to `false`):
he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 팆 qux'
// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
'encodeEverything': true
});
// → 'foo © bar ≠ baz 팆 qux'
// This setting can be combined with the `useNamedReferences` option:
he.encode('foo © bar ≠ baz ???? qux', {
'encodeEverything': true,
'useNamedReferences': true
});
// → 'foo © bar ≠ baz 팆 qux'раскодировать
Эта функция берет строку HTML и декодирует любые именованные и числовые ссылки в ней, используя алгоритм, описанный в разделе 12.2.4.69 спецификации HTML.
he.decode('foo © bar ≠ baz 팆 qux');
// → 'foo © bar ≠ baz ???? qux'Повеселись
