Эквивалент HtmlSpecialChars в Javascript?
По-видимому, это сложнее найти, чем я думал. И это даже так просто...
Есть ли функция, эквивалентная PHP htmlspecialchars, встроенная в Javascript? Я знаю, что это довольно просто реализовать, но вы можете использовать встроенную функцию, если она доступна, только приятнее.
Для тех, кто не знаком с PHP, htmlspecialchars переводит такие вещи, как <htmltag/> в <htmltag/>
Я знаю, что escape() и encodeURI() не работают таким образом.
Ответы
Ответ 1
Возникает проблема с вашим кодом решения - он будет избегать только первого появления каждого специального символа. Например:
escapeHtml('Kip\ <b>evil</b> "test" code\ here');
Actual: Kip's <b>evil</b> "test" code here
Expected: Kip's <b>evil</b> "test" code's here
Вот код, который работает правильно:
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
Update
Следующий код даст идентичные результаты выше, но он работает лучше, особенно на больших блоках текста (спасибо jbo5112).
function escapeHtml(text) {
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
Ответ 2
Это кодирование HTML. Для этого нет встроенной функции javascript, но вы можете использовать Google и получать некоторые из них.
например. http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/
EDIT:
Это то, что я тестировал:
var div = document.createElement('div');
var text = document.createTextNode('<htmltag/>');
div.appendChild(text);
console.log(div.innerHTML);
Выход: <htmltag/>
Ответ 3
Стоит прочитать:
http://bigdingus.com/2007/12/29/html-escaping-in-javascript/
escapeHTML: (function() {
var MAP = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
var repl = function(c) { return MAP[c]; };
return function(s) {
return s.replace(/[&<>'"]/g, repl);
};
})()
Примечание: запускайте только один раз. И не запускайте его на уже закодированные строки, например. & становится &amp;
Ответ 4
С jQuery это может быть так:
var escapedValue = $('<div/>').text(value).html();
Из связанного вопроса Скрытие строк HTML с помощью jQuery
Как упоминалось в комментарии, двойные кавычки и одинарные кавычки остаются как есть для этой реализации. Это означает, что это решение не должно использоваться, если вам нужно сделать атрибут элемента как строку raw html.
Ответ 5
Underscore.js предоставляет для этого функцию:
_.escape(string)
Вызывает строку для вставки в HTML, заменяя символы &, <, > , "и".
http://underscorejs.org/#escape
Это не встроенная функция Javascript, но если вы уже используете Underscore, это лучшая альтернатива, чем запись вашей собственной функции, если ваши строки для преобразования не слишком велики.
Ответ 6
Еще одно взятие на этом состоит в том, чтобы отказаться от всего отображения символов в целом и вместо этого преобразовать все нежелательные символы в их соответствующие числовые ссылки на символы, например:
function escapeHtml(raw) {
return raw.replace(/[&<>"']/g, function onReplace(match) {
return '&#' + match.charCodeAt(0) + ';';
});
}
Обратите внимание, что указанный RegEx обрабатывает только те символы, которые OP хочет выполнить, но в зависимости от контекста, который будет использоваться экранированный HTML, эти символы могут быть недостаточными. Статья Ryan Groves Там больше, чем HTML-экранирование, чем &, <, > и, хорошо читается в этой теме. И в зависимости от вашего контекст, для устранения XSS может потребоваться следующий RegEx:
var regex = /[&<>"'` [email protected]$%()=+{}[\]]/g
Ответ 7
Здесь функция для удаления HTML:
function escapeHtml(str)
{
var map =
{
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&<>"']/g, function(m) {return map[m];});
}
И для декодирования:
function decodeHtml(str)
{
var map =
{
'&': '&',
'<': '<',
'>': '>',
'"': '"',
''': "'"
};
return str.replace(/&|<|>|"|'/g, function(m) {return map[m];});
}
Ответ 8
Я предлагаю две ссылки
это реализует точно функцию PHP
http://phpjs.org/functions/htmlspecialchars:426
и это реализует обратное также
http://www.toao.net/32-my-htmlspecialchars-function-for-javascript
Ответ 9
String.prototype.escapeHTML = function() {
return this.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
:
var toto = "test<br>";
alert(toto.escapeHTML());
Ответ 10
Для пользователей Node.JS(или пользователей, использующих время выполнения Jade в браузере) вы можете использовать функцию escape-функции Jade.
require('jade').runtime.escape(...);
Нет смысла писать это самостоятельно, если кто-то его поддерживает.:)
Ответ 11
function htmlspecialchars(str) {
if (typeof(str) == "string") {
str = str.replace(/&/g, "&"); /* must do & first */
str = str.replace(/"/g, """);
str = str.replace(/'/g, "'");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
}
return str;
}
Ответ 12
Надеюсь, что это победит в гонке из-за ее производительности и, самое главное, не цепной логики с использованием .replace('&', '&'). replace ('<', '<')...
var mapObj = {
'&':"&",
'<':"<",
'>':">",
'"':""",
'\'':"'"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
function escapeHtml(str)
{
return str.replace(re, function(matched)
{
return mapObj[matched.toLowerCase()];
});
}
console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));
Ответ 13
Обратный:
function decodeHtml(text) {
return text
.replace(/&/g, '&')
.replace(/</ , '<')
.replace(/>/, '>')
.replace(/"/g,'"')
.replace(/'/g,"'");
}
Ответ 14
Скорее всего, вам не нужна такая функция. Поскольку ваш код уже находится в браузере *, вы можете получить доступ к DOM напрямую, а не генерировать и кодировать HTML, который должен быть декодирован в обратном порядке браузером, который будет фактически использоваться.
Используйте свойство textContent для вставки обычного текста в DOM безопасно и намного быстрее, чем использование любой из представленных функций эвакуации. Даже быстрее, чем назначить статическую preencoded строку innerHTML.
Используйте classList для редактирования классов, dataset для установки атрибутов data- и setAttribute для других.
Все они будут обрабатывать вас. Точнее, никакого экранирования не требуется, и никакое кодирование не будет выполняться под **, поскольку вы работаете над HTML, текстовым представлением DOM.
// use existing element
var author = 'John "Superman" Doe <[email protected]>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;
// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);
// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);
.important { color: red; }
<div id="first"></div>
Ответ 15
JavaScript не имеет встроенной функции htmlspecialchars, но вы можете использовать PHP как службу API для вызова функции PHP htmlspecialchars непосредственно.
Например, используя jQuery:
var url = 'http://api.phpasaservice.com/htmlspecialchars?string=%3Cb%3Ehello+world%3C%2Fb%3E&callback=?';
$.getJSON(url, function(json) {
var encodedString = json['return'];
});
