Могу ли я избежать специальных символов html в javascript?

Question

Я хочу отобразить текст в HTML с помощью функции JavaScript. Как я могу избежать специальных символов html в JS? Есть ли API?

Answer 1

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

Answer 2

Вы можете использовать функцию .text() jQuery .

Например:

http://jsfiddle.net/9H6Ch/

Из документации jQuery относительно .text() function:

Мы должны знать, что этот метод экранирует предоставленную строку по мере необходимости, чтобы он правильно отображался в HTML.Для этого он вызывает метод DOM .createTextNode (), не интерпретирует строку как HTML.

Предыдущие версии документации jQuery сформулировали это так ( выделение добавлено ):

Мы должны знать, что этот метод экранирует предоставленную строку по мере необходимости, чтобы он правильно отображался в HTML.Для этого он вызывает метод DOM .createTextNode (), , который заменяет специальные символы их эквивалентами HTML-сущности (например, & lt; for <). </p>

Answer 3

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

Answer 4

Я думаю, что нашел правильный способ сделать это ...

// 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);

Answer 5

Использование lodash

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

исходный код

Answer 6

Это, безусловно, самый быстрый способ, которым я видел это.Кроме того, все это происходит без добавления, удаления или изменения элементов на странице.

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

Answer 7

Было интересно найти лучшее решение:

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

Answer 8

Самый краткий и эффективный способ отображения незакодированного текста - использовать свойство textContent.

Быстрее , чем при использовании innerHTML.И это без учета экранирования.

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

Answer 9

DOM Elements поддерживает преобразование текста в HTML, присваивая innerText . innerText не является функцией, но присвоение ей работает так, как если бы текст был экранирован.

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

Answer 10

Вы можете закодировать каждый символ в вашей строке:

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

Или просто нацеливайтесь на главных героев, о которых нужно беспокоиться (&, inebreaks, <,>, "и '), например:

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>