641

有谁知道从jQuery中的字符串中转义 HTML 的简单方法？我需要能够传递任意字符串并将其正确转义以显示在 HTML 页面中（防止 JavaScript/HTML 注入攻击）。我确信可以扩展 jQuery 来做到这一点，但我目前对框架的了解还不够多，无法做到这一点。

4

27 回答 27

643

还有来自 mustache.js 的解决方案

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

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}
于 2012-08-20T08:21:05.680 回答
468

由于您使用的是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;
于 2008-08-24T17:22:15.480 回答
185 
$('<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

于 2008-12-17T10:28:45.113 回答
61

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

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

根据您的用例，您可能还需要"执行&quot;. 如果列表足够大，我会使用一个数组：

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。

于 2008-08-24T05:54:49.160 回答
40

很容易使用下划线：

_.escape(string)

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

于 2013-09-12T05:30:46.013 回答
37

我写了一个很小的函数来做到这一点。它只转义", &, <and >（但通常这就是你所需要的）。它比早先提出的解决方案稍微优雅一些​​，因为它只使用一个 .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];
    });
}

注意上面对&#39;撇号的使用（可能已经使用了符号实体&apos;——它是在 XML 中定义的，但最初并未包含在 HTML 规范中，因此可能并非所有浏览器都支持。请参阅：关于 HTML 字符编码的维基百科文章）。我还记得在某处读到使用十进制实体比使用十六进制更广泛地支持，但我现在似乎无法找到它的来源。（并且不可能有很多浏览器不支持十六进制实体。）

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

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

于 2012-11-14T00:39:33.710 回答
37

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

escaped = new Option(unescaped).innerHTML;

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

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

于 2016-03-01T22:55:19.110 回答
31

这是一个干净、清晰的 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;');
}
于 2012-05-30T23:46:09.303 回答
30

经过最后的测试，我可以推荐最快且完全跨浏览器兼容的原生 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
}

看看我的最终性能比较（堆栈问题）。

于 2013-07-09T10:44:35.483 回答
24

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

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

输出：

'&lt;div&gt;Blah blah blah&lt;/div&gt;'
于 2012-08-20T07:36:13.763 回答
17

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

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

var escapedHtml = html.replace(/&/g, '&amp;')
                      .replace(/>/g, '&gt;')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');
于 2012-05-25T12:39:21.180 回答
15

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

var __entityMap = {
    "&": "&amp;",
    "<": "&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()

于 2012-11-22T10:20:19.583 回答
11

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

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry &amp; Moe
于 2014-09-04T17:15:18.663 回答
5

如果您要走正则表达式路线，则上面的 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]]);
}
于 2011-05-21T21:18:27.783 回答
5

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

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;
    }
}
于 2012-10-31T01:08:05.763 回答
3

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

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

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
于 2015-01-29T16:34:02.170 回答
3

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

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

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

或者只是针对主要角色担心，&换行符<，，，，等等：>"'

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/
<p><b>What JavaScript Generated:</b></p>

<textarea id=test rows="3" cols="55"></textarea>

<p><b>What It Renders Too In HTML:</b></p>

<div id="testing">www.WHAK.com</div>

于 2015-07-26T14:02:43.757 回答
2 
(function(undefined){
    var charsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

没有全局变量，一些内存优化。用法：

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

结果是：

"some&lt;tag&gt;and&amp;symbol&copy;"
于 2013-05-13T11:21:59.030 回答
2

纯 JavaScript 转义示例：

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"
于 2017-10-11T09:52:18.260 回答
1

ES6 一种来自 mustache.js的解决方案

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);
于 2019-09-16T11:41:17.150 回答
0 
function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}
于 2012-06-27T15:15:00.270 回答
0 
function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

奇迹般有效

于 2013-06-03T02:48:33.027 回答
0

速度优化版本：

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

于 2020-12-27T03:12:14.063 回答
0

用于转义 html 特价商品 (UTF-8)

function htmlEscape(str) {
  return str
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\//g, '&#x2F;')
      .replace(/=/g,  '&#x3D;')
      .replace(/`/g, '&#x60;');
}

对于 unescape html specials (UTF-8)

function htmlUnescape(str) {
  return str
      .replace(/&amp;/g, '&')
      .replace(/&quot;/g, '"')
      .replace(/&#39;/g, "'")
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&#x2F/g, '/')
      .replace(/&#x3D;/g, '=')
      .replace(/&#x60;/g, '`');
}
于 2022-01-12T07:18:38.210 回答
-2

这个答案提供了 jQuery 和普通的 JS 方法，但是不使用 DOM 是最短的：

unescape(escape("It's > 20% less complicated this way."))

转义字符串：It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

如果转义空间困扰您，请尝试：

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

转义字符串：It%27s %3E 20%25 less complicated this way.

不幸的是，该escape()函数在 JavaScript 版本 1.5 中已被弃用。encodeURI()orencodeURIComponent()是替代品，但他们忽略'，所以最后一行代码会变成这样：

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

所有主流浏览器仍然支持短代码，并且考虑到旧网站的数量，我怀疑这种情况很快就会改变。

于 2012-09-18T08:45:58.860 回答
-2

如果您将此信息保存在数据库中，则使用客户端脚本转义 HTML 是错误的，这应该在服务器中完成。否则很容易绕过你的 XSS 保护。

为了说明我的观点，这里有一个使用答案之一的例子：

假设您正在使用函数 escapeHtml 从博客中的评论中转义 Html，然后将其发布到您的服务器。

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

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

用户可以：

  • 编辑 POST 请求参数并将注释替换为 javascript 代码。
  • 使用浏览器控制台覆盖 escapeHtml 函数。

如果用户将此代码段粘贴到控制台中，它将绕过 XSS 验证：

function escapeHtml(string){
   return string
}
于 2015-03-06T18:55:24.570 回答
-2

如果您不阻止重新转义，所有解决方案都是无用的，例如，大多数解决方案都会继续转义&到&amp;.

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] + ";";
        }
    ) : "";
};
于 2015-05-26T19:52:33.117 回答