Есть ли собственный способ кодирования или декодирования HTML-объектов с использованием JavaScript или ES6? Например, <
будет закодирован как <
. Существуют библиотеки типа html-entities
для Node.js, но похоже, что в JavaScript должно быть что-то встроенное в JavaScript, который уже справляется с этой общей потребностью.
Собственный JavaScript или ES6 способ кодирования и декодирования объектов HTML?
Ответ 1
В JavaScript API нет встроенной функции, которая преобразует символы ASCII в эквивалент "html-entity". Вот начало решения и простой трюк, который вам может понравиться
Ответ 2
Хорошая функция, использующая es6 для выхода из HTML:
const escapeHTML = str => str.replace(/[&<>'"]/g,
tag => ({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag));
Ответ 3
Чтобы декодировать html, я просто использую тег <pre>
и эту функцию:
function convertHTML(str) {
var entityPairs = [
{character: '&', html: '&'},
{character: '<', html: '<'},
{character: '>', html: '>'},
{character: "'", html: '''},
{character: '"', html: '"'},
];
entityPairs.forEach(function(pair){
var reg = new RegExp(pair.character, 'g');
str = str.replace(reg, pair.html);
});
return str;
}
//var or file.html from Ajax
var str = `
<head>
<title>OK</title>
</head>`;
document.getElementById("preHtml").innerHTML = convertHTML(str);
<pre id="preHtml"></pre>
Ответ 4
Бросьте свой собственный (caveat - use HE instead for most use cases)
Для чистого JS без библиотеки вы можете кодировать и декодировать HTML-объекты, используя чистый Javascript, например:
let encode = str => {
let buf = [];
for (var i = str.length - 1; i >= 0; i--) {
buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
}
return buf.join('');
}
let decode = str => {
return str.replace(/&#(\d+);/g, function(match, dec) {
return String.fromCharCode(dec);
});
}
Usages:
encode("Hello > © <") // "Hello > © <"
decode("Hello > © © <") // "Hello > © © <"
Однако,, вы можете видеть, что у этого подхода есть пара недостатков:
- Он кодирует даже безопасные символы
H
→H
- Он может декодировать числовые коды (не в астральной плоскости), но ничего не знает о полном списке html-сущностей/именованных кодов символов, поддерживаемых браузерами, например
>
Используйте библиотеку HE (HTML-объекты)
- Поддержка всех стандартных именованных ссылок на символы
- Поддержка юникода
- Работает с неоднозначными амперсандами
- Автор Матиас Биненс
Использование:
he.encode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'
he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'