将转义 HTML 存储在属性值中

Question

如何在属性值中存储转义的 HTML？如果我尝试存储例如> or < in a attribute value on a div, then try to read it back, the browser is unescaping it.

例如

HTML

<div id="content" tooltip="Ref: &lt;Unknown&gt;">one fine day in the middle of the night...</div>
<button id="show-tooltip">Show tooltip</button>

JS

var content = document.getElementById('content');
var show = document.getElementById('show-tooltip');
var tooltip;
show.addEventListener('click', function (event) {
    if (tooltip) { 
        document.body.removeChild(tooltip);
    }

    tooltip = document.createElement('div');
    tooltip.classList.add('tooltip');
    tooltip.innerHTML = content.getAttribute('tooltip');
    tooltip = document.body.appendChild(tooltip);
});

CSS

.tooltip {
    width: 100px;
    height: 50px;
    border: 1px solid rgba(0, 0, 0, .3);
    background-color: rgba(255, 255, 0, .3);    
}

小提琴：http://jsfiddle.net/axo25vhy/

我希望工具提示文本显示 "Ref: <Unknown>"，但是文本 <Unknown> 正在转换为 HTML 标记，因此不会显示。

Answer 1

最简单的方法可能是将 < 中的符号编码为 & => &lt;

http://jsfiddle.net/etoz8o0x/

当您的内容附加到 html 时，浏览器会将 & 解码为 <。如果您将 & 正确编码为 &lt;，浏览器会将 < 解码，然后在视觉上显示为 <

将转义 HTML 存储在属性值中

Store escaped HTML in an attribute value

html

escaping