如何在 html 工具提示中转义 html

Question

我正在尝试使用 HTML 打印工具提示，但我需要将其中一些 html 隔开。我尝试了一些东西，但没有成功。

这是我的例子：http : //jsfiddle.net/wrsantos/q3o1e4ut/1/

在这个例子中，我想转义 <code> 中的所有 html。

<span rel="tooltip" 
    data-toggle="tooltip" 
    data-trigger="hover" 
    data-placement="bottom" 
    data-html="true" 
    data-title="<table><tr><td style='color:red;'>complex&nbsp;</td><td>HTML:</td></tr></table><code>&lt;html&gt;</code>">
    hover over me to see html
</span>

Javascript：

$('[rel="tooltip"]').tooltip();

编辑：

这不是重复的（我可以在 Twitter Bootstrap 的工具提示中使用复杂的 HTML 吗？）

我想要来自 html 和非 html 工具提示的“混合模式”。

在工具提示中，我将拥有风格化内容和非风格化内容（非风格化内容将在 <code> 标签内）。

Answer 1

这应该可以做到。

var el = $('[rel="tooltip"]');
var escaped = $('<div/>').text(el.attr('data-title')).html();
el.attr('data-title', escaped);
el.tooltip();

编辑：我误解了你想要做什么。要转义标签内的内容<code>，请执行以下操作：

var el = $('[rel="tooltip"]');
var title = el.attr('data-title');
var code = /<code>(.*?)<\/code>/.exec(title)[1];
var escaped = $('<div/>').text(code).html();
title = title.replace(/<code>.*?<\/code>/, '<code>' + escaped + '</code>');
el.attr('data-title', title);
el.tooltip();