我如何编码和解码HTML实体使用JavaScript或JQuery?

var varTitle = "Chris' corner";

我希望它是:

var varTitle = "Chris' corner";

当前回答

向页面中注入不受信任的HTML是危险的,如如何使用jQuery解码HTML实体中所述。

一种替代方法是使用PHP html_entity_decode的纯javascript实现(来自http://phpjs.org/functions/html_entity_decode:424)。这个例子应该是这样的:

var varTitle = html_entity_decode("Chris' corner");

其他回答

我知道我有点晚了,但我认为我可以提供以下片段作为我如何使用jQuery解码HTML实体的示例:

var varTitleE = "Chris' corner";
var varTitleD = $("<div/>").html(varTitleE).text();

console.log(varTitleE + " vs. " + varTitleD);​​​​​​​​​​​

不要忘记启动检查器/firebug以查看控制台结果——或者简单地将console.log(…)替换为/alert(…)

也就是说,以下是我的控制台通过谷歌Chrome检查器读取的内容:

Chris&apos; corner vs. Chris' corner

我不建议使用jQuery代码作为答案。虽然它不会将要解码的字符串插入到页面中,但它确实会创建脚本和HTML元素等内容。这代码比我们需要的多。相反,我建议使用更安全、更优化的函数。

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

要使用这个函数,只需调用decodeEntities(“&”),它将使用与jQuery版本相同的底层技术——但是没有jQuery的开销,并且在清除输入中的HTML标记之后。请参阅Mike Samuel关于如何过滤HTML标记的公认答案的评论。

这个函数可以很容易地作为jQuery插件使用,只需在您的项目中添加以下行即可。

jQuery.decodeEntities = decodeEntities;

为了在列表中添加另一个“受Robert K的启发”,这里是另一个不剥离HTML标签的安全版本。它不是通过HTML解析器运行整个字符串,而是只提取实体并转换它们。

var decodeEntities = (function() {
    // this prevents any overhead from creating the object each time
    var element = document.createElement('div');

    // regular expression matching HTML entities
    var entity = /&(?:#x[a-f0-9]+|#[0-9]+|[a-z0-9]+);?/ig;

    return function decodeHTMLEntities(str) {
        // find and replace all the html entities
        str = str.replace(entity, function(m) {
            element.innerHTML = m;
            return element.textContent;
        });

        // reset the value
        element.textContent = '';

        return str;
    }
})();

这里有一个不需要创建div的快速方法,并解码“最常见的”HTML转义字符:

function decodeHTMLEntities(text) {
    var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"']
    ];

    for (var i = 0, max = entities.length; i < max; ++i) 
        text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);

    return text;
}

就像Robert K说的,不要使用jQuery.html().text()来解码html实体,因为这是不安全的,因为用户输入永远不能访问DOM。阅读关于XSS的文章,了解为什么这是不安全的。

相反,尝试使用带有escape和unescape方法的Underscore.js实用带库:

_.escape(string)

转义插入HTML的字符串,替换&,<,>,",',和'字符。

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

_.unescape(string)

escape的反义词,代替&, &lt;, &gt;, &quot;, &#96;和& # x27;和他们没有逃脱的同伴。

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

要支持解码更多字符,只需复制下划线unescape方法并向映射添加更多字符。