我使用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编码?


当前回答

FWIW,编码没有丢失。编码由标记解析器(浏览器)在页面加载期间使用。读取和解析源代码后,浏览器将DOM加载到内存中,编码就被解析成它所表示的内容。所以当你的JS被执行读取内存中的任何东西时,它得到的字符就是编码所表示的。

在这里,我可能严格按照语义操作,但我希望您理解编码的目的。“失去”这个词听起来像是某件事没有像它应该做的那样运作。

其他回答

function encodeHTML(str) { return document.createElement(“a”).appendChild( document.createTextNode(str)).parentNode.innerHTML; }; 函数解码HTML(str) { var element = document.createElement(“a”); element.innerHTML = str; 返回元素文本内容; }; var str = “<” var enc = encodeHTML(str); var dec = decodeHTML(enc); console.log(“str: ” + str, “\nenc: ” + enc, “\ndec: ” + dec);

我知道这是一个老问题,但我想发布一个可接受的答案的变化,在IE中工作而不删除行:

function multiLineHtmlEncode(value) {
    var lines = value.split(/\r\n|\r|\n/);
    for (var i = 0; i < lines.length; i++) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('\r\n');
}

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

下面是一个非jQuery版本,它比jQuery .html()版本和.replace()版本都快得多。这保留了所有空格,但与jQuery版本一样,不处理引号。

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

速度:http://jsperf.com/htmlencoderegex/17

演示:

输出:

脚本:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

FWIW,编码没有丢失。编码由标记解析器(浏览器)在页面加载期间使用。读取和解析源代码后,浏览器将DOM加载到内存中,编码就被解析成它所表示的内容。所以当你的JS被执行读取内存中的任何东西时,它得到的字符就是编码所表示的。

在这里,我可能严格按照语义操作,但我希望您理解编码的目的。“失去”这个词听起来像是某件事没有像它应该做的那样运作。

这是一个简单的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("æåøåæå"))

我已经做了一个主旨“HTMLEncode方法javascript”。