有人知道一个简单的方法来转义HTML从字符串在jQuery?我需要能够传递一个任意字符串,并有它正确转义显示在HTML页面(防止JavaScript/HTML注入攻击)。我确信可以通过扩展jQuery来实现这一点,但目前我对框架的了解还不够,无法实现这一点。


当前回答

这是一个简洁明了的JavaScript函数。它会将诸如"a few < many"这样的文本转义为"a few &lt;许多”。

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

其他回答

一个速度优化版本:

function escapeHtml(s) { let out = ""; let p2 = 0; for (let p = 0; p < s.length; p++) { let r; switch (s.charCodeAt(p)) { case 34: r = "&quot;"; break; // " case 38: r = "&amp;" ; break; // & case 39: r = "&#39;" ; break; // ' case 60: r = '&lt;' ; break; // < case 62: r = '&gt;' ; break; // > default: continue; } if (p2 < p) { out += s.substring(p2, p); } out += r; p2 = p + 1; } if (p2 == 0) { return s; } if (p2 < s.length) { out += s.substring(p2); } return out; } const s = "Hello <World>!"; document.write(escapeHtml(s)); console.log(escapeHtml(s));

如果你不防止再次逃逸,所有的解决方案都是无用的,例如,大多数解决方案将继续逃逸&到&

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};

试着强调。它与jQuery一起工作。

_.str.escapeHTML('<div>Blah blah blah</div>')

输出:

'&lt;div&gt;Blah blah blah&lt;/div&gt;'

这是一个很好的安全的例子……

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

我写了一个小函数来做这个。它只转义“,&,<和>(但通常这就是你所需要的)。它比前面提出的解决方案稍微优雅一些,因为它只使用一个.replace()来完成所有的转换。(编辑2:降低代码复杂度,使函数更小更整洁,如果你对原始代码感到好奇,请参阅答案末尾。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

这是纯Javascript,没有使用jQuery。

逃避/和“too”

编辑以回应mklement的评论。

上面的函数可以很容易地扩展到包括任何字符。要指定更多要转义的字符,只需将它们插入正则表达式中的字符类(即在/[…]/g中)和chr对象中的一个条目中。(编辑2:用同样的方式缩短了这个函数。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Note the above use of &#39; for apostrophe (the symbolic entity &apos; might have been used instead – it is defined in XML, but was originally not included in the HTML spec and might therefore not be supported by all browsers. See: Wikipedia article on HTML character encodings). I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal, but I can't seem to find the source for that now though. (And there cannot be many browsers out there which does not support the hexadecimal entities.)

注意:将/和'添加到转义字符列表中并不是很有用,因为它们在HTML中没有任何特殊含义,也不需要转义。

原始escapeHtml函数

编辑2:原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来限定它的范围,这使得函数(不必要地)变得更大更复杂。

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

我还没有测试这两个版本中哪个更快。如果你喜欢,请在这里添加相关信息和链接。