我使用JavaScript从隐藏字段中拉出一个值并在文本框中显示它。隐藏字段中的值被编码。

例如,

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

被卷入

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

通过一些jQuery来获取隐藏字段的值(在这一点上,我失去了编码):

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

问题是当我读粉笔&cheese从隐藏字段,JavaScript似乎失去了编码。我不希望价值是粉笔和奶酪。我想要字面上的amp;被保留。

是否有JavaScript库或jQuery方法可以对字符串进行html编码?


当前回答

这是一个模拟服务器的程序。HTMLEncode函数来自微软的ASP,用纯JavaScript编写:

htmlEncode函数{ var ntable = { “l”:“amp,” “50%”:“莉莉。托姆琳”, “>”:“gt”, “\“”:“参与的。” 出于美观; s=s.replace(/[&<>")/ g, function (ch){ 返回"&"+ntable[ch]+";"; 出于美观) s = s.replace(/[胡言乱语])/g, function(ch) 返回"&#"+ch.charcodeat(0).tostring()+";"; 出于美观); s return; 出于美观

结果不编码撇号,而是编码其他HTML特殊字符和0x20-0x7e范围之外的任何字符。

其他回答

基于angular的sanitize…(es6模块语法)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

这是一个模拟服务器的程序。HTMLEncode函数来自微软的ASP,用纯JavaScript编写:

htmlEncode函数{ var ntable = { “l”:“amp,” “50%”:“莉莉。托姆琳”, “>”:“gt”, “\“”:“参与的。” 出于美观; s=s.replace(/[&<>")/ g, function (ch){ 返回"&"+ntable[ch]+";"; 出于美观) s = s.replace(/[胡言乱语])/g, function(ch) 返回"&#"+ch.charcodeat(0).tostring()+";"; 出于美观); s return; 出于美观

结果不编码撇号,而是编码其他HTML特殊字符和0x20-0x7e范围之外的任何字符。

对于那些喜欢纯javascript的人,这里是我成功使用的方法:

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

没有Jquery更快。你可以对字符串中的每个字符进行编码:

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

或者只关注主要角色(&,inebreaks, <, >, "和'),比如:

函数编码(r) { 返回r.replace (/ [\ x26 \ x0A \ < > "] / g函数(r){返回" & # + r.charCodeAt(0) +”;“}) } 测试。value=encode('编码HTML实体!\n\n"安全"转义<脚本id=\'\'> &有用在<pre>标签!'); testing.innerHTML = test.value; /************* * \x26是& &号(必须排在第一位), * \x0A为换行符, *************/ <textarea id=test rows="9" cols="55"></textarea> www.WHAK.com < div id = "测试" > < / div >

编辑:这个答案是很久以前发布的,htmlDecode函数引入了一个XSS漏洞。它已被修改,将临时元素从div改为textarea,减少XSS的机会。但是现在,我鼓励您像其他回答中建议的那样使用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。

在这里查看一个正在运行的示例。