jQuery html()不支持<象征

使用.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!

这只是一个样本。

您可以在片段中使用<明确说明，但这不是您的问题，您的JS问题没有关闭摘要中的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>

您可以使用HTML Entity <替换<符号。

$(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>

如果您无法控制输入文本，则可以在JavaScript中编码HTML实体。如该链接所述，您可以创建一种方法来编码输入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>

这个小提琴建议您的代码工作(在一定程度上(：https：//jsfiddle.net/6y2s0ue9/

您可能只想纠正$(document).ready以关闭：

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

单击按钮，它替换为"在此处"的" hello＆lt; world！"

使用 .html()，代码将读取 <符号为标签，以便它不打印任何东西，以便其他答案可以解决。.但是，使用.text()，它将读取，因为它可以替换，因此带有<

的符号

<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>

相关内容

最新更新

热门标签：