使用 jQuery 转义 HTML 字符串

IT技术 javascript jquery string escaping
2021-01-30 04:58:38

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

6个回答

还有来自 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

如上面的答案所述,此解决方案不能保证保留空格。
2021-03-12 04:58:38

如果您要转义 HTML,那么我能想到的只有三个是真正必要的:

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

根据您的用例,您可能还需要执行诸如"to 之类的操作&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。

@Ryan:尽管值得指出的是,此解决方案无法正确处理已编码的字符串,但同样适用于此页面上的大多数(可能是所有)解决方案也毫无value。
2021-03-21 04:58:38
如果有问题的 HTML 已经转义实体,则此正则表达式将产生奇怪的结果。例如,转义“Tom & Jerry”会产生“Tom & Jerry”
2021-03-30 04:58:38
请使用本地var申报item无论如何,for … in在遍历数组时根本不要使用循环!改用普通for循环。哦,它是encodeURIComponent,不是escapeURIComponent
2021-03-30 04:58:38
如果您正在使用标签属性,那么您还需要转义引号和/或双引号。htmlspecialchars 的 PHP 文档包含一个有用的转换列表。php.net/htmlspecialchars
2021-04-01 04:58:38
只是对新人的善意提醒,如果您打算在网站上的某处使用非英语字符,请不要使用它......显然这不会因为字符带有像'é'这样的口音:&eacute; 这是 html 实体列表,供参考:w3schools.com/tags/ref_entities.asp
2021-04-03 04:58:38

很容易使用下划线:

_.escape(string) 

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

反之亦然_.unescape(string)
2021-03-30 04:58:38