我可以在javascript中转义html特殊字符吗？

我想通过javascript函数将文本显示为HTML。如何在JS中转义html特殊字符？是否有API？

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

您可以使用jQuery的.text()功能。

例如：

http://jsfiddle.net/9H6Ch/

从有关该.text()功能的jQuery文档中：

我们需要注意的是，此方法会转义必要时提供的字符串，以便将其正确呈现为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);

使用lodash

_.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

显示未编码文本的最简洁，最高效的方法是使用textContentproperty。

比使用更快innerHTML。而且这还没有考虑到转义开销。

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

DOM元素通过分配给innerText支持将文本转换为HTML 。innerText不是函数，但是对其进行赋值就像将文本转义一样。

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

您可以对字符串中的每个字符进行编码：

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>

一线（适用于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结构时遇到了这个问题。这个问题帮助我解决了。我想使用双V形作为路径分隔符，但是附加一个新的文本节点直接导致显示转义的字符代码，而不是字符本身：

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标签（我希望）。