JavaScript 的 htmlEntities | CSS-Tricks

htmlentities() 是一个 PHP 函数，它将特殊字符（如 <）转换为其转义/编码值（如 <）。这允许您显示字符串，而不会让浏览器将其读取为 HTML。

JavaScript 没有它的原生版本。如果您只需要最基本的功能，以便浏览器不会将其解释为 HTML，那么以下方法应该可以正常工作（来自 James Padolsey，我从 David Walsh 获得了类似的想法）。

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

该 PHP.js 项目，旨在将所有 PHP 的原生函数移植到 JavaScript，其中也包含一个示例。我尝试过，它确实有效，但有人警告我该项目中的许多代码编写得很糟糕，因此我保持简单，并使用了上述方法。

Krinkle

# 2010年9月14日

我在我的代码中使用了以下两个函数，在我看来，这是一个非常可靠、完整且简单的方法。
此特定示例使用了 jQuery，但原理不依赖于 jQuery

// Encode/decode htmlentities
	function krEncodeEntities(s){
		return $j("<div/>").text(s).html();
	}
	function krDencodeEntities(s){
		return $j("<div/>").html(s).text();
	}

Miguel

评论永久链接# 2010年9月22日

你能展示一个上述 jQuery 编码在表单上工作的示例吗？

这是正确的吗？
Domenic Corso

评论永久链接# 2013年4月21日

非常感谢哈哈！这将解决我很多 AJAX 问题:D
HayNar

评论永久链接# 2014年4月21日

这是一个不错的技巧，但对于性能至关重要的规模较大的 Web 应用程序来说，它并不实用。这段代码创建了一个虚拟 DOM 元素来操作其中的文本，DOM 方法调用是最消耗资源的方法。我更倾向于对字符串应用多次替换，而不是创建和销毁虚拟 DOM 元素。

Krinkle

# 2010年12月14日

当然，给你
http://krinkle-tools.grizzdesign.nl/js-htmlentities.html

Ben

# 2011年3月29日

感谢这两个函数，它们帮我解决了处理序列化查询字符串时遇到的难题。

Mark

# 2011年10月6日

感谢信息！！(^_^)b

buzz

# 2012年2月2日

jQuery 方法的问题是，如果您的文本包含 htmlentities，例如

$(”).text(‘&’).html()

输出

“&”

可能不是您想要的……

buzz

评论永久链接# 2012年2月2日

上面帖子中过滤的实体。应改为

$(‘<p>’).text(‘&’).html()

将输出

&amp;
oria

评论永久链接# 2015年7月9日

您的示例证明它完美地工作了。
htmlEntities(‘&’) 应该返回 ‘&’

要测试它，请查看在编码和解码后是否可以获得相同的值。

Vinay

# 2012年3月1日

谢谢，它帮助了我..:)？

john

# 2012年4月2日

当然，发布时它可以工作，但是保存时呢

Bret

# 2012年7月12日

这种方法的问题，正如 Buzz 提到的，是所有＆符号，即使已经正确地进行了 html 处理，也会被匹配，导致出现诸如 htmlentities("&") == "&amp;" 和 htmlentities(htmlentities("<")) == "&lt;" 之类的情况（虽然您不会执行后者，但这只是为了说明这一点）。您需要对＆符号的正则表达式进行填充。在大多数情况下，使用空格即可，即

s.replace(/& /g, '&amp; ')

或者您可以使用更复杂的方法，例如

s.replace(/&[^(#\d+;|a-z+;)]/g, '&amp;')

James

评论永久链接# 2013年8月29日
为什么不只是将所有 & 替换为 & 作为第一个替换方法？这解决了双重编码＆符号的问题。
```
return String(str).replace(/&amp;/g, '&').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
```
这对我很有效。
Francescomm

评论永久链接# 2017年5月10日

这没问题：这种行为完全正确。

如果您使用 PHP 自身的 htmlentities(‘Me & myself’)，它将正确返回 ‘Me & myself’。如果您希望文本 ‘Me & myself’（按原样）显示在页面上，则这是在 HTML 中进行编码的正确方法。

如果您再次对其进行编码，它将变为 ‘Me && myself’，这也是正确的。

“即使已经正确地进行了 html 处理” 完全是胡说八道。

如果一个说明页面想要向您展示如何编写实体，并且希望＆显示在页面上，它必须为＆编写＆，然后按原样编写 ‘amp;’，因此 HTML 代码变为 &，就是这样。

在您的想法中，＆“已经正确地进行了 html 处理” 对 HTML 代码和解析器没有任何影响……

Jay

# 2012年7月16日

如何执行此操作的反向操作？我想在 js 中显示解释的 html 实体。例如


$(function(){
    $("#demo").formwizard({ 
        textNext: 'Go to step two »'
        }
);

希望 ‘textNext’ 输出为 转到步骤二 »

Pimm Hogeling

# 2012年11月25日

请注意，这与 PHP 函数的作用不同。PHP 函数使用 HTML 实体；而此函数使用 XML 实体。

例如，此函数会使 Orléans 保持不变，而 PHP 函数会将该字符串转换为 Orléans。

Shilpa

# 2013年3月24日

帮了我很大的忙……krEncodeEntities、krDencodeEntities 解决了我的问题……

Jonathan Neal

# 2013年7月26日

我可能来晚了，但这是我的看法。这将安全地并（主要）按名称对 innerHTML 字符串中的实体进行编码，并带有一个可选的真值参数来对所有内容进行编码（即 <、> 和 &）。String.prototype.encodeHTMLEntities (1.45 KB)

KrishnaTorque

# 2014年1月22日

function htmlEntities(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g,'&apos'); }

感谢此脚本。我在该行的末尾添加了 .replace(/'/g,'&apos')。也许它会有帮助

hasan gilak

# 2014年2月8日

请查看此代码

$(“body”).text($(“body”).html());

一行代码；)

Mathias Bynens

# 2014年5月23日

Chris 在这里发布的解决方案运行良好。

但是，此页面上的某些评论讨论了扩展实现，这些实现不仅可以转义不安全的字符，还可以编码任何非 ASCII 字符。我只想说：在 JavaScript 中编码/解码 HTML 实体比看起来要复杂。

这是 HTML 实体编码/解码脚本中常见问题列表。评论中链接的所有解决方案都至少存在那里提到的一个问题。我的 he 库可以完美地处理所有这些问题。

Thirunavukkarasu

# 2014年6月5日

这个技巧拯救了我的一天！感谢简单的解决方案！

Digital Defense

# 2014年6月24日

我本来想推荐优秀的 he 库（由 Mathias Bynens 编写），但我看到 Mathias 自己已经处理了这个问题。除非您 100% 确定您需要编码的字符串不包含任何特殊字符，否则 he 库是唯一的选择。

q bonito

# 2014年8月21日

太棒了 Krinkle!!!!!!! 使用你的评论

赵欣

# 2015年8月26日

我认为我们不需要编码 & 和 ” 和 ‘。
我们只需要编码 <，>，空格和制表符。
而且我听说，数字 HTML 实体代码支持度更高，所以…
我的代码如下。

String.prototype.enHtmlEntity = function(){return enHtmlEntity(this);};
String.prototype.deHtmlEntity = function(){return deHtmlEntity(this);};

/**
* 将 HTML 字符串编码为实体字符串
* @author 赵欣
* @email [email protected]
* @param {String} str HTML 普通字符串
* @return {String} HTML 实体字符串
*/
function enHtmlEntity(str){
return String(str).replace(//g, ‘>’)
.replace(/[ ]/g, ‘ ’)
.replace(/\t/g, ‘’);
} /* end of function enHtmlEntity */

/**
* 将 HTML 实体解码为普通字符
* @author 赵欣
* @email [email protected]
* @param {String} str HTML 实体字符串
* @return {String} HTML 普通字符串
*/
function deHtmlEntity(str){
return String(str).replace(/\&#60\;/gi, ”)
.replace(/\&#160\;/gi, ‘ ‘)
.replace(/\&#173\;/gi, ‘\t’);
} /* end of function deHtmlEntity */

Ryan

# 2016年6月8日

谢谢你的分享。快速简单的修复。

Nikita

# 2017年1月16日

此函数替换最常见的字符名称和所有字符编号。

function htmlDecode(inp){
  var replacements = {'&lt;':'<','&gt;':'>','&sol;':'/','&quot;':'"','&apos;':'\'','&amp;':'&','&laquo;':'«','&raquo;':'»','&nbsp;':' ','&copy;':'©','&reg;':'®','&deg;':'°'
                     };
  for(var r in replacements){
    inp = inp.replace(new RegExp(r,'g'),replacements[r]);
  }
  return inp.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
}

（最新版本）

Joachim Kruyswijk

# 2020年4月13日

我错过了单引号，并将其添加到函数中。代码如下：

function htmlEntities(str) {
return String(str)
.replace(/&/g, ‘&’)
.replace(/</g, ‘<‘)
.replace(/>/g, ‘>’)
.replace(/”/g, ‘"’)
.replace(/’/g, ‘'’)
;
}

评论

发表评论 取消回复

发表评论取消回复