JQuery html() 不支持 < 符号答案

【问题标题】：JQuery html() not support < symbolJQuery html() 不支持 < 符号
【发布时间】：2019-05-24 18:22:34
【问题描述】：

使用.html() 更改内容时，会出现无法显示全部数据的问题：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script>

    $(document).ready(function() {
      $("#btn2").click(function() {
        $("#test2").html("<b>Hello < world!</b>");
      });

  </script>
</head>

<body>
  <p id="test2">Result here</p>
  <button id="btn2">Click for result</button>
</body>

</html>

我得到的结果是：Hello

我需要的结果是：Hello < world!

这只是一个示例。

【问题讨论】：

你可能需要转义那个&lt;，你试过&lt;吗？

标签： javascript jquery html jquery-ui

【解决方案1】：

您可以在您的 sn-p 中使用 &lt; 来明确，但这不是您的问题，您的 JS 问题不是在您的 sn-p 中关闭 jQuery.ready 函数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello &lt; world!</b>");
    });
  });
</script>
</head>
<body>
    <p id="test2">Result here</p>
    <button id="btn2">Click for result</button>
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用HTML entity &lt; 替换< 符号。

$(document).ready(function()
{
    $("#btn2").click(function()
    {
        $("#test2").html("<b>Hello &lt; world!</b>");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test2">Result here</p>
<button id="btn2">Click for result</button>

如果您无法控制输入文本，则可以Encode html entities in javascript。如该链接所述，您可以创建一种方法来对输入 str 进行编码：

function encodeStr(str)
{
    return str.replace(
        /[\u00A0-\u9999<>\&]/gim,
        i => '&#' + i.charCodeAt(0) + ';'
    );
}

$(document).ready(function()
{
    $("#btn2").click(function()
    {
        let text = "Hello < world!";
        $("#test2").html("<b>" + encodeStr(text) + "</b>");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test2">Result here</p>
<button id="btn2">Click for result</button>

【讨论】：

IE 不支持此功能

【解决方案3】：

这个小提琴表明你的代码可以工作（在一定程度上）：https://jsfiddle.net/6y2s0ue9/

您可能只想更正$(document).ready 以关闭，如下所示：

$(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello < world!</b>");
    });
});

点击按钮时，它将“Result here”替换为“Hello ”

【讨论】：

【解决方案4】：

使用.html()，代码会将&lt; 符号作为标签读取，因此它不会打印任何内容，因此其他答案可以解决这个问题。但是使用.text()，它将按原样读取，因此无需将符号替换为&lt;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html($('<b></b>').text("Hello < world!"));
    });
  });
</script>
</head>
<body>
    <p id="test2">Result here</p>
    <button id="btn2">Click for result</button>
</body>
</html>

【讨论】：