Question

如何将转义的HTML存储在属性值中？如果我试图存储，例如在div上的属性值中>或<，然后尝试将其读回，浏览器无法使用它。

E.g。

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

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

http://jsfiddle.net/etoz8o0x/

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

将转义的HTML存储在属性值中

1 个答案: