[英]getAttribute(“name”) unescapes html?
我们有一些自定义JS脚本来处理工具提示,这些脚本在呈现页面时放在dom属性(工具提示)中。
但是,当我尝试检索此工具提示(显示为div)时,字符串javaScript似乎会自动取消转义属性值。 这是正常行为吗? 有办法避免这种情况吗?
我的问题是<email@example.org>变成了(无效的)html。
复制示例:
<div tltip ="<text>" id="escaped" />
<div tltip ="<text>"id="notescaped" />
js:
a = document.getElementById("escaped").getAttribute("tooltip");
b = document.getElementById("notescaped").getAttribute("tooltip");
a.match("<"); //returns true (unexpected)
a.match("<"); //returns true (expected)
a == b; // returns true (unexpected)
编辑:
澄清我试图显示(div)工具提示的地方,我想以某种方式从dom中读取诸如"<b> <email@example.com> <\\b>"
,并将其显示在div中看起来像:“ <email@example.org> ”
不是“转义”字符的JavaScript,而是解码实体的HTML解析器。 这是预期的行为。
如果您觉得这不合逻辑,请告诉我如何在属性中加上双引号和单引号。
<div tltip=""'"> does not work.
<div tltip=""'"> does work.
<div tltip='"''> does work.
<div tltip=""'"> does work.
关于已编辑的问题
您不必阅读原始源代码。 例如:
<div tltip="<b>test</b>" id="test"></div>
var output1 = document.getElementById('html');
var output2 = document.getElementById('plain');
var attrValue = document.getElementById('test').getAttribute('tltip');
output1.innerHTML = attrValue;
output2.textContent = attrValue;
将呈现为:
输出1: 测试
输出2:<b>测试</ b>
旧的IE版本不支持textContent
。 跨浏览器兼容的方式是:
output2[document.textContent === null ? 'textContent' : 'innerText'] = attrValue;
// OR
output2.innerHTML = ''; // Empty contents
output2.appendChild(document.createTextNode(attrValue));
如果您仍想解码实体,则可以进行以下操作:
// <b> -> <b>
function decode(strHTML) {
var tmp = document.createElement('div');
tmp.appendChild(document.createTextNode(strHTML));
return tmp.innerHTML;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.