4

我们有一些自定义的 JS 脚本来处理工具提示，这些脚本在我们渲染页面时被放入一个 dom 属性（工具提示）中。

但是，当我尝试检索此工具提示（显示为 div）时，字符串 javaScript 似乎会自动取消转义属性值。这是正常行为吗？有没有办法避免这种情况？

我遇到的问题是 <email@example.org> 变成（无效）html。

复制示例：

<div tltip ="&lt;text&gt;" 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）工具提示，我想以某种方式读取内容，例如： "<b> &lt;email@example.com&gt <\b>" 从 dom 并将其显示在一个 div 中，它应该看起来像：“ <email@example.org> ”

4

1 回答 1

6

“取消转义”字符的不是 JavaScript，而是解码实体的 HTML 解析器。这是预期的行为。

如果这听起来不合逻辑，请告诉我如何在属性中添加双引号和单引号。

<div tltip=""'">          does not work.
<div tltip="&quot;'">     does work.
<div tltip='"&#39;'>      does work.
<div tltip="&quot;&#39;"> does work.

关于已编辑的问题
您不必阅读原始源代码。例如：

<div tltip="&lt;b&gt;test&lt;/b&gt;" 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>

textContent旧 IE 版本不支持。一种跨浏览器兼容的方式是：

output2[document.textContent === null ? 'textContent' : 'innerText'] = attrValue;
// OR
output2.innerHTML = ''; // Empty contents
output2.appendChild(document.createTextNode(attrValue));

如果您仍想解码实体，则以下操作将起作用：

// <b> -> &lt;b&gt;
function decode(strHTML) {
    var tmp = document.createElement('div');
    tmp.appendChild(document.createTextNode(strHTML));
    return tmp.innerHTML;
}
于 2012-06-27T10:43:03.840 回答