如何在HTML提示框中转义HTML代码

Question

如何在HTML提示框中转义HTML代码

6

我想用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();

编辑：

这不是与（Can I use complex HTML with Twitter Bootstrap's Tooltip?）重复。

我想要的是一种类似于 html 和非 html 工具提示的 "混合模式"。

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

- wallybh

我需要一些 HTML 并转义其他内容。我先检查了这个线程。 - wallybh

1

我使用了这个例子。但请注意，我放置了一个<code>标签，并且我想转义此标签内的HTML。这是一件不同的事情。 - wallybh

@DLeh请审核我的问题。请查看我的示例和编辑。我的问题不是https://dev59.com/52Yr5IYBdhLWcg3waJZT的重复。这是一个不同的问题。 - wallybh

3个回答

2

如果您需要在工具提示中使用丰富的媒体，我个人建议使用JQUERY、HTML Div标签和CSS来构建。这非常简单，并且能够让您创建任何您想要的内容。以下是一个示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p>
<a href="#" title="That&apos;s what this widget is">Tooltips</a> 
can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little             
 box next to the element, just like a native tooltip.
</p>
<p>
But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery      
 UI&apos;s theme builder application">ThemeRoller</a>

 will also style tooltips accordingly.
 </p>
 <p>
 Tooltips are also useful for form elements, to show some additional      
 information in the context of each field.</p>
 <p>
 <label for="age">Your age:</label>

   <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>

- UniversityComp

2

您需要在提示框的声明中添加它：

$('[rel="tooltip"]').attr('data-title', $('[rel="tooltip"]').attr('data-title') + "<code>&lt;html&gt;</code>").tooltip();

从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>">
    hover over me to see 
    <code>&lt;html&gt;</code>
</span>

FIDDLE: http://jsfiddle.net/q3o1e4ut/7/

- user2755140

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vrmc · Accepted Answer

这应该可以做到。

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();