JQuery html () не поддерживает <символ - PullRequest
Новая
       9

JQuery html () не поддерживает <символ

0 голосов
/ 24 мая 2019

При изменении содержимого с помощью .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!

Это просто пример.

Ответы [ 4 ]

3 голосов
/ 24 мая 2019

Вы можете использовать &lt; в своем фрагменте, чтобы быть явным, но это не было вашей проблемой, ваша проблема 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>
2 голосов
/ 24 мая 2019

Вы можете использовать HTML-сущность &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>

Если у вас нет контроля над вводимым текстом, тогда вы можете Кодировать html-сущности в 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>
0 голосов
/ 24 мая 2019

С .html() код будет читать символ < в виде тега, поэтому он ничего не печатает, поэтому другие ответы могут решить это. Но с .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>
0 голосов
/ 24 мая 2019

Эта скрипка предполагает, что ваш код работает (в некоторой степени): https://jsfiddle.net/6y2s0ue9/

Вы можете просто захотеть исправить $(document).ready, чтобы закрыть, например: 

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

Вкл.нажатие кнопки заменяет «Результат здесь» на « Hello »

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...