使用 jQuery 转义 HTML 字符串

还有the solution from mustache.js

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

---

由于您使用的是 jQuery，因此您只需设置元素的 text 属性：

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

---

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

来源：http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

---

如果您要转义 HTML，那么我认为只有三个是真正必要的：

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

根据您的使用案例，您可能还需要执行 " 到 " 之类的操作。如果列表足够大，我会使用一个数组：

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() 只会对 URL 进行转义，而不是 HTML。

---

很容易使用下划线：

_.escape(string) 

Underscore 是一个实用程序库，提供了许多原生 js 不提供的功能。还有 lodash，它与下划线的 API 相同，但被重写以提高性能。

---

我写了一个很小的函数来做到这一点。它只转义 "、&、< 和 >（但通常这就是您所需要的全部）。它比早先提出的解决方案稍微优雅一些，因为它只使用 one .replace() 来完成所有转换。 （编辑 2： 降低了代码复杂性，使函数变得更小更整洁，如果您对原始代码感到好奇，请参阅此答案的结尾。）

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

这是纯 Javascript，没有使用 jQuery。

转义 / 和 ' 太

编辑以回应 mklement 的评论。

上面的函数可以很容易地扩展为包含任何字符。要指定要转义的更多字符，只需将它们插入到正则表达式的字符类中（即在 /[...]/g 内）和作为 chr 对象中的条目。 （编辑 2： 也以同样的方式缩短了这个函数。）

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

请注意上面使用 ' 表示撇号（符号实体 ' 可能已被使用——它是在 XML 中定义的，但最初并未包含在 HTML 规范中，因此可能并非所有浏览器都支持。请参阅： Wikipedia article on HTML character encodings)。我还记得在某处读到使用十进制实体比使用十六进制更广泛地支持，但我现在似乎无法找到它的来源。 （并且不可能有很多浏览器不支持十六进制实体。）

注意：将 / 和 ' 添加到转义字符列表中并不是很有用，因为它们在 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]; });
    };
}());

我还没有测试过这两个版本中哪个更快。如果您这样做，请随时在此处添加有关它的信息和链接。

---

我意识到我参加这个聚会有多晚，但我有一个不需要 jQuery 的非常简单的解决方案。

escaped = new Option(unescaped).innerHTML;

编辑：这不会转义引号。唯一需要转义引号的情况是内容将被内联粘贴到 HTML 字符串中的属性。我很难想象这样做会是好的设计。

编辑3：对于最快的解决方案，请查看Saram的上述答案。这个是最短的。

---

这是一个干净、清晰的 JavaScript 函数。它将诸如“一些<许多”之类的文本转义为“一些<许多”。

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

---

经过最后的测试，我可以推荐最快且完全跨浏览器兼容的原生 javaScript (DOM) 解决方案：

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

如果您重复多次，您可以使用一次准备好的变量来执行此操作：

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

看看我的最终表现comparison (stack question)。

---

试试 Underscore.string lib，它适用于 jQuery。

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

输出：

'<div>Blah blah blah</div>'

---

escape() 和 unescape() 旨在编码/解码 URL 的字符串，而不是 HTML。

实际上，我使用以下代码片段来完成不需要任何框架的技巧：

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

---

我增强了 mustache.js 示例，将 escapeHTML() 方法添加到字符串对象。

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

这样就很容易使用"Some <text>, more Text&Text".escapeHTML()

---

如果您有 underscore.js，请使用 _.escape（比上面发布的 jQuery 方法更有效）：

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

---

如果您要走正则表达式路线，则上面的 tghw 示例中存在错误。

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

---

这是一个很好的安全示例...

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

---

您可以使用 vanilla js 轻松完成。

只需在文档中添加一个文本节点。它将被浏览器转义。

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

---

2个不需要JQUERY的简单方法...

您可以像这样对字符串中的所有字符进行编码：

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

或者只是定位主要角色来担心 &、换行符、<、>、" 和 '，例如：

函数编码(r){ return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"}) } var myString='编码 HTML 实体！\n"Safe" 转义