在Javascript中等效的HtmlSpecialChars？

Question

显然,这比我想象的要难得多.它甚至如此简单......

是否有一个功能相当于PHP的内置于Javascript的htmlspecialchars？我知道自己实现起来相当容易,但使用内置函数(如果可用)更好.

对于那些不熟悉PHP,用htmlspecialchars转换这样的东西<htmltag/>进入<htmltag/>

我知道,escape()并且encodeURI()不以这种方式工作.

Answer 1

您的解决方案代码存在问题 - 它只会逃避每个特殊字符的第一次出现.例如:

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]; });
}

Answer 2

这是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/>

Answer 3

值得一读: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);
  };
})()

注意:只运行一次.并且不要在已编码的字符串上运行它,例如&变为&

Answer 4

使用jQuery,它可以是这样的:

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

从相关问题使用jQuery转义HTML字符串

正如评论中所提到的,双引号和单引号保留为此实现的原样.这意味着如果您需要将element属性设置为原始html字符串,则不应使用此解决方案.

Answer 5

这是一个转义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];});
}

Answer 6

Underscore.js为此提供了一个函数:

_.escape(string)

转义字符串以插入HTML,替换&,<,>,"和"字符.

http://underscorejs.org/#escape

它不是一个内置的Javascript函数,但是如果你已经在使用Underscore,那么如果要转换的字符串不是太大,那么它是一个比编写自己的函数更好的选择.

Answer 7

另一个目的是完全放弃所有字符映射,而是将所有不需要的字符转换为它们各自的数字字符引用,例如:

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

请注意,指定的RegEx仅处理OP要转义的特定字符,但是,根据将要使用转义的HTML的上下文,这些字符可能不够.Ryan Grove的文章除了&,<,>之外还有更多的HTML转义,并且"对这个主题是一个很好的阅读.根据你的上下文,为了避免XSS注入,可能需要以下RegEx:

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