HtmlSpecialChars эквивалент в Javascript?

Видимо, найти это сложнее, чем я думал. И это даже так просто ...

Есть ли функция, эквивалентная PHP htmlspecialchars, встроенная в Javascript? Я знаю, что это довольно легко реализовать самостоятельно, но использование встроенной функции, если она доступна, просто приятнее.

Для тех, кто не знаком с PHP, htmlspecialchars переводит такие вещи, как <htmltag/>в<htmltag/>

Я знаю это escape()и encodeURI()не работаю таким образом.

Существует проблема с вашим кодом решения - он будет избегать только первое вхождение каждого специального символа. Например:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

Вот код, который работает правильно:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Обновить

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

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

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

Например, http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

РЕДАКТИРОВАТЬ:
Это то, что я проверял:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Вывод: <htmltag/>

Стоит прочитать: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

Примечание : запускайте только один раз. И не запускайте его на уже закодированных строках, например, &становится&

С jQuery это может быть так:

var escapedValue = $('<div/>').text(value).html();

Из смежного вопроса Экранирование строк HTML с помощью jQuery

Как упомянуто в комментарии, двойные кавычки и одинарные кавычки остаются для этой реализации как есть. Это означает, что это решение не следует использовать, если вам нужно сделать атрибут элемента в виде необработанной HTML-строки.

Вот функция для выхода из HTML:

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

И расшифровать:

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js предоставляет функцию для этого:

_.escape(string)

Экранирует строку для вставки в HTML, заменяя символы &, <,>, "и".

http://underscorejs.org/#escape

Это не встроенная функция Javascript, но если вы уже используете Underscore, это лучшая альтернатива, чем написание собственной функции, если строки для преобразования не слишком велики.

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

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

Обратите внимание, что указанный RegEx обрабатывает только определенные символы, которые OP хотел экранировать, но, в зависимости от контекста, в котором будет использоваться экранированный HTML, этих символов может быть недостаточно. Статья Райана Гроува. В HTML есть нечто большее, чем &, <,>, и « является хорошим чтением по этой теме. И в зависимости от вашего контекста может потребоваться следующий RegEx, чтобы избежать внедрения XSS:

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

образец :

var toto = "test<br>";
alert(toto.escapeHTML());

Скорее всего, вам не нужна такая функция. Поскольку ваш код уже находится в браузере *, вы можете напрямую обращаться к DOM, а не генерировать и кодировать HTML-код, который должен быть декодирован в обратном направлении браузером для фактического использования.

Используйте innerTextсвойство для вставки простого текста в DOM безопасно и намного быстрее, чем с помощью любой из представленных escape-функций. Даже быстрее, чем присвоение статической предварительно кодированной строки innerHTML.

Используйте classListдля редактирования классов, datasetдля установки data-атрибутов и setAttributeдля других.

Все это поможет вам убежать. Точнее, экранирование не требуется, и кодирование не будет выполняться под **, поскольку вы работаете с HTML, текстовым представлением DOM.

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
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>

* Этот ответ не предназначен для пользователей JavaScript на стороне сервера (Node.js и т. Д. )

** Если вы не конвертируете его в фактический HTML впоследствии. Например, доступ innerHTML- это то, что происходит, когда вы запускаете $('<div/>').text(value).html();предложенный в других ответах. Поэтому, если ваша конечная цель - вставить некоторые данные в документ, сделав это таким образом, вы сделаете эту работу дважды. Также вы можете видеть, что в полученном HTML не все закодировано, только тот минимум, который необходим для его правильности. Это делается в зависимости от контекста, поэтому этот метод jQuery не кодирует кавычки и, следовательно, не должен использоваться в качестве escape-кода общего назначения. Экранирование кавычек необходимо, когда вы создаете HTML как строку с ненадежными или содержащими цитаты данными вместо значения атрибута. Если вы используете DOM API, вам вовсе не нужно заботиться о том, чтобы избежать этого.

Для пользователей Node.JS (или пользователей, использующих Jade Runtime в браузере), вы можете использовать функцию escape Jade.

require('jade').runtime.escape(...);

Нет смысла писать это самостоятельно, если кто-то другой поддерживает это. :)

Я немного уточняю ответ ОК.

Вы можете использовать функции DOM браузера для этого.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

Это возвращает <escapeThis>&

Он использует стандартную функцию createElementдля создания невидимого элемента, затем использует функцию, textContentчтобы установить любую строку в качестве ее содержимого, а затем innerHTMLполучить содержимое в своем представлении HTML.

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, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

Надеюсь, что это выиграет гонку из-за ее производительности и, что важнее всего, не цепочки логики с использованием .replace ('&', '&'). Replace ('<', '<') ...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
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>'));

Перевернутый один:

function decodeHtml(text) {
    return text
        .replace(/&/g, '&')
        .replace(/&lt;/ , '<')
        .replace(/&gt;/, '>')
        .replace(/&quot;/g,'"')
        .replace(/&#039;/g,"'");
}

OWASP рекомендует, чтобы «[e] xcept для буквенно-цифровых символов, [вы должны] экранировать все символы со значениями ASCII меньше 256 с &#xHH;форматом (или именованным объектом, если он доступен), чтобы предотвратить переключение из атрибута [an]».

Итак, вот функция, которая делает это, с примером использования:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

Это решение использует числовой код символов, например <, заменяется на <.

Хотя его производительность немного хуже, чем у решения с использованием карты , у него есть свои преимущества:

• Не зависит от библиотеки или DOM
• Довольно легко запомнить (вам не нужно запоминать 5 экранирующих символов HTML)
• Маленький код
• Достаточно быстро (это все же быстрее, чем 5 цепочек замены)