Чи можу я уникнути спеціальних символів html у JavaScript?

Я хочу вивести текст у HTML за допомогою функції javascript. Як я можу уникнути спеціальних символів html у JS? Чи є API?

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

Ви можете використовувати .text()функцію jQuery .

Наприклад:

http://jsfiddle.net/9H6Ch/

З документації jQuery щодо .text()функції:

Нам потрібно пам’ятати, що цей метод уникає рядка, наданого в міру необхідності, щоб він правильно відображався в HTML. Для цього він викликає метод DOM .createTextNode (), не інтерпретує рядок як HTML.

Попередні версії документації jQuery сформулювали це так ( наголос додано ):

Нам потрібно пам’ятати, що цей метод уникає рядка, наданого в міру необхідності, щоб він правильно відображався в HTML. Для цього він викликає метод DOM .createTextNode (), який замінює спеціальні символи їхніми еквівалентами сутності HTML (наприклад, <lt; for <).

Я думаю, що я знайшов правильний спосіб це зробити ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

Використовуючи лодаш

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

вихідний код

Це, безумовно, найшвидший спосіб, коли я це бачив. Плюс - це все без додавання, видалення чи зміни елементів на сторінці.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Цікаво було знайти краще рішення:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

Я не розбираю, >тому що це не порушує XML / HTML-код в результаті.

Ось орієнтири: http://jsperf.com/regexpairs Також я створив універсальну escapeфункцію: http://jsperf.com/regexpairs2

Найбільш стислий та найефективніший спосіб відображення некодованого тексту - це використання textContentвластивостей.

Швидше, ніж використання innerHTML. І це без урахування втечі накладних витрат.

document.body.textContent = 'a <b> c </b>';

DOM Elements підтримують перетворення тексту в HTML шляхом присвоєння innerText . innerText не є функцією, але присвоєння їй працює так, як ніби уникнути тексту.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

Ви можете кодувати кожен символ у рядку:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Або просто націліть на головних персонажів, які турбуються про (&, неполадки, <,>, "та"), наприклад:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

Однолінійний (для ES6 +):

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

Для старих версій:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

У цьому питанні зіткнулися під час створення структури DOM. Це питання допомогло мені вирішити. Я хотів використовувати подвійний шеврон як роздільник шляху, але додавання нового текстового вузла безпосередньо призвело до відображення униклого коду символів, а не до самого символу:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

Якщо ви вже використовуєте модулі у своєму додатку, ви можете використовувати модуль escape-html .

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

Спробуйте це, використовуючи prototype.jsбібліотеку:

string.escapeHTML();

Спробуйте демонстрацію

Я придумав таке рішення.

Припустимо, що ми хочемо додати трохи елемента до HTML з небезпечними даними користувача або бази даних.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

Це небезпечно від атак XSS. Тепер додайте це.

$(document.createElement('div')).html(unsafe).text();

Так воно і є

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

Мені це набагато простіше, ніж використовувати, .replace()і він видалиться !!! всі можливі теги html (я сподіваюся).