Как я могу отображать HTML-теги в виде текста с помощью jQuery?

#javascript #jquery #html #dom

#javascript #jquery #HTML #dom

Вопрос:

Я пытаюсь отобразить неотрендерированный HTML-код, используя class html и приведенный ниже код jquery. Он работает для каждого тега, кроме тегов <html> , <head> и <body> . Есть ли способ, которым они также могут отображаться как текст?

 $(document).ready(function () {
    $('.html').each(function () {
        $(this).text($(this).html());
    });
});

HTML-код:

 <pre>
<div class="html">
    <html>
    <head><title>Title</title></head>
    <body>
    <p>Unrendred html</p>
    </body>
    </html>
</div>
</pre>

Ожидаемый контент:

 <div class="html">
    <html>
    <head><title>Title</title></head>
    <body>
    <p>Unrendred html</p>
    </body>
    </html>
</div>

Фактическое содержимое:

 <title>Title</title>

<p>Unrendred html</p>

1. Браузер удаляет недопустимые теги. Какова здесь конечная цель? Я уверен, что есть лучший способ решить эту проблему (возможно, шаблоны?).

2. я хотел создать html-документ, который показывает фрагменты HTML-кода, которые включают теги <html>, <head> и <body> ..

Ответ №1:

Ваш HTML неверен. У вас не может быть большинства этих тегов там, где вы их размещаете.

Когда браузер пытается проанализировать ваш неверный HTML, он обнаруживает ваши ошибки и пытается их исправить.

Результатом этого является то, что они никогда не помещаются внутрь .html элемента в DOM, поэтому при попытке преобразовать DOM обратно в HTML они не появятся.

Единственный способ, которым вы могли бы удалить их оттуда, — это повторно извлечь исходный исходный код с сервера, а затем самостоятельно проанализировать HTML.

Просто напишите HTML правильно в первую очередь. Если вы хотите отобразить < символ, затем введите amp;< HTML (и так далее). Не пытайтесь экранировать HTML с помощью JavaScript после того, как браузер уже проанализировал его.

Ответ №2:

вам нужно заменить синтаксис тега, как показано ниже

ожидаемый результат в этом примере скрипки — http://jsfiddle.net/uEMh2 /

 <pre>
amp;<div class="html"amp;>
    amp;<htmlamp;>
    amp;<headamp;>amp;<titleamp;>Titleamp;</titleamp;>amp;</headamp;>
    amp;<bodyamp;>
    amp;<pamp;>Unrendred htmlamp;</pamp;>
    amp;</bodyamp;>
    amp;</htmlamp;>
amp;</divamp;>
</pre>

Ответ №3:

  escapeHTML {
     return html.replace(/amp;/g,'amp;amp;').replace(/</g,'amp;<').replace(/>/g,'amp;>');
 }

Так работает prototype.

Ответ №4:

я пытался решить вашу проблему с помощью jquery, но вам нужно добавить один неиспользуемый <pre> тег в свой код и две строки jquery code

если вы игнорируете <pre> и jquery script на выходе, то все так, как вы не хотите

 <!doctype html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                var data = $('html').html();
                data = "<!doctype html>n<html lang="en">n" data "n</html>";
                var data = $('pre#html-code').text(data);
            });
        </script>
</head>
<body>
<pre id="html-code"></pre>
</body>
</html>

Ответ №5:

экранируйте <> символы — в вашем html, а также в вашем js используйте html функцию вместо html()

 <pre>
<div class="html">
    amp;<pamp;>amp;< html / amp;>amp;</p amp;gt
    amp;<head amp;>amp;<title amp;>Titleamp;</titleamp;>amp;</head amp;>
    amp;<body amp;>
    amp;<p amp;>Unrendred htmlamp;</p amp;>
    amp;</body amp;>
    amp;</htmlamp;>
</div>
</pre>


$(document).ready(function () {
    $('.html').each(function () {
        $(this).text($(this).html);
    });
});

http://fiddle.jshell.net/p3BXK/16/

1. он получает тот же результат, что и вы. я думаю, он тоже хочет видеть элементы <html> и <body> .

2. это по-прежнему не меняет результат. теги <html>, <head> и <body> по-прежнему отсутствуют в выходных данных.

3. @webSpider да, хороший способ «обмануть» браузер: D

4. @webSpider: теперь вам не нужна функция replace .

5. Вам вообще не нужен JavaScript.