javascript - 如何在 Javascript 函数中对 HTML 字符进行编码？

Question

对于所有 Javascript 专家来说，这个问题可能只是基础问题。我正在使用 jQuery，并且正在处理使用 jQuery.flot 创建的工具提示。

以下是 html 文件中我的 javascript 函数的一部分，这正是我正确渲染工具提示 div 所需要的:

$('<div id="tooltip">' + contents + '</div>').css( {

因为 div 没有显示，所以我使用 Firebug 来查找原因，上面的代码行显示了特殊字符 < 和 > 编码为 html 实体 < 和 >，如下所示:

$('<div id="tooltip">' + contents + '</div>').css( {

我在几个在线资源中搜索解决方案，并尝试了 .replace(/lt;/g,'<') 或 .html().text() 等方法，花了我三个多小时，但没有任何帮助.

我在本地主机上工作正常。

完整源代码:

<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.categories.js"></script>
<![CDATA[
  <script type="text/javascript">

    $(function () {
      var data = [ ]]>{e1Array}<![CDATA[ ];
      $.plot($("#placeholder1"), [ data ], {
        series: {
          bars: {
            show: true,
            barWidth: 1,
            align: "center"
          }
        },
        grid: {
          hoverable: true,
          clickable: true
        },
        xaxis: {
          mode: "categories",
          tickLength: 0
        },
        yaxis: {
          min: 0,
          max: 1,
          ticks: 0
        }
      } );
    });

    var previousPoint = null;
    $("#placeholder1").bind("plothover", function (event, pos, item) {
      if (item) {
        if (previousPoint != item.datapoint) {
          previousPoint = item.datapoint;
          $("#tooltip1").remove();
          showTooltip(item.pageX, item.screenY, item.series.data[item.dataIndex][0] + ': ' + item.series.data[item.dataIndex][1] + ' Einträge');
        }
      } else {
        $("#tooltip1").remove();
        previousPoint = null;
      }
    });

    function showTooltip(x, y, contents) {
      $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: 100,
        left: x,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
      }).appendTo("#e1-container").fadeIn(0);
    }

  </script>
]]>
<div class="e1-container" id="e1-container">
  <div id="placeholder1" class="e1"></div>
</div>

Answer 1

<![CDATA[
  <script type="text/javascript">

这似乎是你的问题，或者至少是 FireBug 在你的代码中显示 html 实体的原因。如果你想use cdata at all ，您应该将其放在 <script> 内标签。

关于为什么工具提示根本不显示，我只能猜测，但对于文本内容我建议使用

$('<div id="tooltip"></div>').text(contents)

而不是将其用作 html 字符串。