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

JavaScript

小卤蛋西门

2020-03-11

I’m using JavaScript to pull a value out from a hidden field and display it in a textbox. The value in the hidden field is encoded.

For example,

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

gets pulled into

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

via some jQuery to get the value from the hidden field (it’s at this point that I lose the encoding):

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

The problem is that when I read chalk &amp; cheese from the hidden field, JavaScript seems to lose the encoding. I do not want the value to be chalk & cheese. I want the literal amp; to be retained.

Is there a JavaScript library or a jQuery method that will HTML-encode a string?

第603篇《从输入字段读取属性时,HTML编码丢失》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
null 2020.03.11

function encodeHTML(str) {
    return document.createElement("a").appendChild( 
        document.createTextNode(str)).parentNode.innerHTML;
};

function decodeHTML(str) {
    var element = document.createElement("a"); 
    element.innerHTML = str;
    return element.textContent;
};
var str = "<"
var enc = encodeHTML(str);
var dec = decodeHTML(enc);
console.log("str: " + str, "\nenc: " + enc, "\ndec: " + dec);

蛋蛋L西里 2020.03.11

我的纯JS功能:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

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

JavaScript HTML实体编码和解码

十三蛋蛋 2020.03.11

如果要使用jQuery。我找到了这个:

http://www.jquerysdk.com/api/jQuery.html特殊字符

(jQuery SDK提供的jquery.string插件的一部分)

我相信Prototype的问题在于它扩展了JavaScript中的基础对象,并且将与您可能使用的任何jQuery不兼容。当然,如果您已经在使用Prototype而不是jQuery,那将不是问题。

编辑:也有这个,这是jQuery原型字符串实用程序的端口:

http://stilldesigning.com/dotstring/

小胖蛋蛋 2020.03.11

以下是一些Server.HTMLEncode用纯JavaScript编写的来自Microsoft ASP 功能的仿真

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

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

西里猿LEY 2020.03.11

这是一个简单的javascript解决方案。它使用方法“ HTMLEncode”扩展了String对象,该方法可用于不带参数或带参数的对象。

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

我的要旨是“用于JavaScript的HTMLEncode方法”

阿飞Harry 2020.03.11

FWIW,编码不会丢失。页面加载期间,标记解析器(浏览器)使用该编码。读取并解析源​​并将浏览器将DOM加载到内存后,编码便已解析为它表示的内容。因此,当您的JS执行以读取内存中的任何内容时,它得到的字符就是编码所表示的字符。

我可能在这里严格地使用语义,但是我希望您了解编码的目的。“丢失”一词听起来好像有些东西没有按预期运行。

番长阿飞 2020.03.11

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

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}
老丝LEY西门 2020.03.11

下划线提供_.escape()_.unescape()执行此操作的方法。

> _.unescape( "chalk &amp; cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk &amp; cheese"

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android