HtmlSpecialChars еквівалент у Javascript?

Мабуть, це важче знайти, ніж я думав, що це буде. І це навіть так просто ...

Чи є функція, еквівалентна htmlspecialchars PHP, вбудована в 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/

EDIT:
Це те, що я перевірив:

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 обробляє лише конкретні символи, з яких хотів уникнути ОП, але, залежно від контексту, в якому буде використовуватися відмічений 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 безпечно та набагато швидше, ніж будь-яка із представлених функцій евакуації. Навіть швидше, ніж призначати статичну попередньо закодовану рядок 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 не кодує котирування, а тому не повинен використовуватися як загальнозміцнювач. Уникнення котирувань потрібно, коли ви створюєте HTML у вигляді рядка з недовіреними або містять цитати даними на місці значення атрибута. Якщо ви використовуєте API DOM, вам взагалі не потрібно дбати про втечу.

Для користувачів Node.JS (або користувачів, які використовують нефритовий час виконання у веб-переглядачі), ви можете скористатися функцією втечі Jade.

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

Немає сенсу писати це самостійно, якщо хтось інший підтримує це. :)

Я детально розглядаю відповідь okw.

Для цього можна використовувати функції 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 ('&', '&').

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 ланцюгових заміни)