javascript - 从输入字段读取属性时 HTML 编码丢失

Question

我正在使用 JavaScript 从隐藏字段中提取一个值并将其显示在文本框中。隐藏字段中的值被编码。

例如，

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

被拉进

<input type='text' value='chalk &amp; cheese' />

通过一些 jQuery 从隐藏字段中获取值(此时我丢失了编码):

$('#hiddenId').attr('value')

问题是当我阅读 chalk & cheese 从隐藏字段中，JavaScript 似乎失去了编码。我不希望值是 chalk & cheese。我希望保留文字 amp;。

是否有可以对字符串进行 HTML 编码的 JavaScript 库或 jQuery 方法？

Answer 1

编辑: 这个答案是很久以前发布的，htmlDecode 函数引入了 XSS 漏洞。它已被修改，将临时元素从 div 更改为 textarea，从而减少了 XSS 的机会。但是现在，我鼓励您使用 other anwswer 中建议的 DOMParser API。 .

---

我使用这些功能:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

基本上一个 textarea 元素是在内存中创建的，但它永远不会附加到文档中。

在 htmlEncode 函数上，我设置元素的 innerText，并检索编码后的 innerHTML；在 htmlDecode 函数上，我设置元素的 innerHTML 值并检索 innerText。

检查一个正在运行的示例here .