原生 JavaScript 支持 HTML 属性编码和 JavaScript 字符串编码？答案

【问题标题】：Native JavaScript support for HTML attribute encoding and JavaScript string encoding?原生 JavaScript 支持 HTML 属性编码和 JavaScript 字符串编码？
【发布时间】：2015-08-13 18:39:02
【问题描述】：

属性值需要编码。如果我要像这样构建一个 jQuery 对象：

$('<div data-value="' + value + '">');

真的，value 必须像这样进行属性编码：

$('<div data-value="' + HtmlAttributeEncode(value) + '">');

我找不到这样的原生函数。有人认为这只是用&quot; 替换双引号的问题，但微软的HttpEncoder.HtmlAttributeEncode 方法将这四个字符编码为& < " '。我似乎在这里看到了诸如quoteattr 之类的实现：https://stackoverflow.com/a/9756789/88409，但这是非常低效的，调用replace 来多次迭代字符串。同样，我需要一个用于编码 javascript 字符串的本机函数（例如 $('<div onclick="var s =\'' + HtmlAttributeEncode(JavaScriptStringEncode(value)) + '\';alert(s);"></div>).appendTo(body);

是否有与此功能等效的本机功能？

注意：请不要提及escape（现在不推荐使用encodeURI 和encodeURIComponent），所有这些都与属性编码无关。

【问题讨论】：

标签： html encoding attributes

【解决方案1】：

没有。

但您不需要它们，因为您可以使用 DOM 方法（或围绕它们的 jQuery 包装器）构建元素，因为您处理的是 DOM 而不是 HTML，因此无需转义。

$('<div />', { "data-value" : value });

或

var div = document.createElement('div');
div.setAttribute('data-value', value);

如果你真的想得到转义的 HTML，你可以获取一个 DOM 并从中生成 HTML：

var html = $('<div />').append(
    $('<div />', { "data-value" : value })
).html();

【讨论】：

这违背了使用 JQuery 从字符串构造复杂嵌套元素的目的，例如模态对话框，例如（$('<div class="modal fade" id="' + HtmlAttributeEncode(id) + '" role="dialog"><div class="modal-dialog"><div class="modal-content"></div></div></div>'); 作为生成此类对话框的函数的一部分。如果我无法对字符串中的变量进行编码，那么我必须使用低效的“查找”调用单独定位生成的元素，并设置属性方法。我很清楚在“替代品”中，我想要原生功能，而不是“不做”的答案。
这不是一件坏事。将字符串拼凑在一起是生成任何数据格式的最容易出错且最难调试的方法。 jsbin.com/golahutasa/1/edit?html,js,output 更容易维护和调试。
没有本机功能（除了我在答案的最后一个代码示例中指出的方法）。
看起来像这样的基本功能：“属性编码”或“字符串编码”，应该像 URI 编码一样具有原生支持。浏览器显然已经实现了这些方法，为什么不公开它们。这也没有涉及 JavaScript 字符串编码。人们炫耀 JavaScript 的原因之一是它能够以完全非面向对象的方式解析像这样的粉碎字符串，例如评估。 jsbin 帖子与此大相径庭，而且更长。虽然我喜欢这段代码，但在更大的场景中它可能会变得过于复杂。
无论如何，这是一个很好的例子，说明如何以高度面向对象的方式使用 jQuery 构建 DOM 结构，但这不是我正在寻找的原始原生字符串编码功能.我在想象一个 Web 应用程序出于不相关的原因想要生成 HTML 字符串的场景……不幸的是，我不得不去搜索一个库来执行这些操作……这又是浏览器已经实现的。这就像重新发明轮子，更不用说倒退十年从 AS3 切换回 JS。

【解决方案2】：

找到一个可以完成工作的 npm 包！

https://www.npmjs.com/package/escape-html

【讨论】：