永远不要使用escape()
. 这与 HTML 编码无关。它更像是 URL 编码,但它甚至不正确。这是一种奇怪的非标准编码,仅在 JavaScript 中可用。
如果你想要一个 HTML 编码器,你必须自己编写它,因为 JavaScript 没有给你。例如:
function encodeHTML(s) {
return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"');
}
然而,虽然这足以将您user_id
放在像 一样的地方input value
,但这还不够,id
因为 ID 只能使用有限的字符选择。(而且%
不在其中,所以escape()
甚至encodeURIComponent()
都不好。)
您可以发明自己的编码方案来将任何字符放入 ID,例如:
function encodeID(s) {
if (s==='') return '_';
return s.replace(/[^a-zA-Z0-9.-]/g, function(match) {
return '_'+match[0].charCodeAt(0).toString(16)+'_';
});
}
但是如果同样的user_id
情况发生两次,你仍然会遇到问题。老实说,乱扔 HTML 字符串的整个过程通常是个坏主意。改用 DOM 方法,并保留对每个元素的 JavaScript 引用,这样您就不必继续调用getElementById
,也不必担心如何将任意字符串插入到 ID 中。
例如。:
function addChut(user_id) {
var log= document.createElement('div');
log.className= 'log';
var textarea= document.createElement('textarea');
var input= document.createElement('input');
input.value= user_id;
input.readonly= True;
var button= document.createElement('input');
button.type= 'button';
button.value= 'Message';
var chut= document.createElement('div');
chut.className= 'chut';
chut.appendChild(log);
chut.appendChild(textarea);
chut.appendChild(input);
chut.appendChild(button);
document.getElementById('chuts').appendChild(chut);
button.onclick= function() {
alert('Send '+textarea.value+' to '+user_id);
};
return chut;
}
您还可以使用便利函数或 JS 框架来减少那里的 create-set-appends 调用的冗长。
预计到达时间:
我目前使用 jQuery 作为框架
好的,然后考虑 jQuery 1.4 创建快捷方式,例如:
var log= $('<div>', {className: 'log'});
var input= $('<input>', {readOnly: true, val: user_id});
...
我现在的问题是我使用 JSONP 向页面添加元素和事件,因此在显示消息之前我无法知道这些元素是否已经存在。
您可以user_id
在 JavaScript 中保持对元素节点(或包装器对象)的查找,以节省将该信息放在 DOM 本身中,其中可以进入的字符id
受到限制。
var chut_lookup= {};
...
function getChut(user_id) {
var key= '_map_'+user_id;
if (key in chut_lookup)
return chut_lookup[key];
return chut_lookup[key]= addChut(user_id);
}
(_map_
前缀是因为 JavaScript 对象不能完全用作任意字符串的映射。空字符串和 IE 中的一些Object
成员名称会混淆它。)