我使用JavaScript从隐藏字段中拉出一个值并在文本框中显示它。隐藏字段中的值被编码。
例如,
<input id='hiddenId' type='hidden' value='chalk & cheese' />
被卷入
<input type='text' value='chalk & cheese' />
通过一些jQuery来获取隐藏字段的值(在这一点上，我失去了编码):
$('#hiddenId').attr('value')
问题是当我读粉笔&cheese从隐藏字段，JavaScript似乎失去了编码。我不希望价值是粉笔和奶酪。我想要字面上的amp;被保留。
是否有JavaScript库或jQuery方法可以对字符串进行html编码?
当前回答
Underscore提供了_.escape()和_.unescape()方法来执行此操作。
> _.unescape( "chalk & cheese" );
"chalk & cheese"
> _.escape( "chalk & cheese" );
"chalk & cheese"
其他回答
我在我的域\用户字符串中遇到了一些反斜杠问题。
我把这个加到了安特洛皮克的答案的其他逃脱中
.replace(/\\/g, '\')
我在这里找到了: 如何在JavaScript中逃脱反斜杠?
据我所知，javascript中没有任何直接的HTML Encode/Decode方法。
然而，你能做的是，使用JS创建一个任意元素，设置它的内部文本，然后使用innerHTML读取它。
让我们说，使用jQuery，这应该工作:
var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();
或者类似的东西。
FWIW，编码没有丢失。编码由标记解析器(浏览器)在页面加载期间使用。读取和解析源代码后，浏览器将DOM加载到内存中，编码就被解析成它所表示的内容。所以当你的JS被执行读取内存中的任何东西时，它得到的字符就是编码所表示的。
在这里，我可能严格按照语义操作，但我希望您理解编码的目的。“失去”这个词听起来像是某件事没有像它应该做的那样运作。
下面是一个非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> & hello</div>';
document.getElementById( 'same' ).textContent =
'html === htmlDecode( htmlEncode( html ) ): '
+ ( html === htmlDecode( htmlEncode( html ) ) );
HTML:
<input id="hidden" type="hidden" value="chalk & cheese" />
<input id="text" value="" />
<div id="same"></div>
Prototype内置了String类。所以如果你正在使用/计划使用Prototype，它会像这样做:
'<div class="article">This is an article</div>'.escapeHTML();
// -> "<div class="article">This is an article</div>"
