Отобразите HTML-код в HTML

код в Groovy с рекурсивным отображением:

import groovy.json.JsonSlurper

def ff = session.get()
if(!ff)return

def json = ff.read().withReader("UTF-8"){r-> new JsonSlurper().parse(r) } 

def mappings = json.remove('mappingvalues')
def mapper(o, mappings){
    if(o instanceof Map){
        //json object. let's iterate it and do mapping
        o = o.collectEntries{k,v-> [ (mappings[k] ?: k), mapper(v,mappings) ] }
    }else if(o instanceof List){
        //map elements in array
        o = o.collect{v-> mapper(v,mappings) }
    }
    return o
}
json = mapper(json,mappings)

ff.write("UTF-8"){w-> new JsonBuilder(json).writeTo(w) }
REL_SUCCESS << ff
188
задан Steven 23 July 2017 в 17:08
поделиться

8 ответов

Нет, не существует. В самом HTML нет никакого способа, кроме экранирования некоторых символов:

  • & как &
  • < как <

(Кстати, нет необходимости экранировать >, но люди часто делают это из соображений симметрии. )

И, конечно, вы должны окружить полученный HTML-код

...
, чтобы (а) сохранить пробелы и переносы строк, и (б) пометить его как элемент кода.

Все другие решения, такие как обертывание кода в нет.

Компьютер <xmp>говорит нет.
83
ответ дан 23 November 2019 в 05:42
поделиться

На самом деле там способ сделать это. Это имеет ограничение (один), но является 100%-м стандартом, не удержанным от использования (как xmp), и работы.

И это тривиально.Вот:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

позвольте мне объяснить. В первую очередь, обычный комментарий HTML делает задание, для предотвращения целого блока быть интерпретированным. Можно легко добавить в нем любые теги, все они будут проигнорированы. Проигнорированный от интерпретации, но все еще доступный через innerHTML! Таким образом, что оставляют, должно получить содержание и отфильтровать предыдущие и запаздывающие маркеры комментария.

Кроме (помнят - ограничение) Вы не можете поместить там комментарии HTML внутри, с тех пор (по крайней мере, в моем Chrome), вложение их не поддерживается, и самый первый '->' закончит шоу.

ну, это - противное небольшое ограничение, но в определенных случаях это не проблема вообще, если Ваш текст свободен от комментариев HTML. И, легче выйти из одной конструкции, затем целый набор их.

Теперь, что то, что странно LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo строка? Это - случайная строка, как хеш, вряд ли чтобы использоваться в блоке и использоваться для? Вот контекст, , почему я использовал его. В моем случае я взял содержание одного DIV, затем обработал его со скидкой с цены Откровенного обмена мнениями и затем выводом, присвоенным в другое отделение. Идея была, чтобы записать скидку с цены, встроенную в файле HTML и просто открыться в браузере, и это преобразует на загрузке на лету. Так, в моем случае, <!-- стал преобразованным к <p><!--</p>, комментарий правильно вышел. Это работало, но загрязнило экран. Так, для легкого удаления его с regex случайная строка использовалась. Вот код:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

И это работает.

, Если кому-то интересно, , эта статья записана с помощью этой техники. Не стесняйтесь загружать, и смотреть в файле HTML.

Это зависит, для чего Вы используете его. Это - ввод данных пользователем? Затем используйте <textarea> и выйдите из всего. В моем случае, и вероятно это - Ваш случай также, я просто использовал комментарии, и это делает задание.

, Если Вы не используете скидку с цены и просто хотите получить ее, как от тега, затем это еще более просто:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

и код JavaScript для получения его:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");
2
ответ дан 23 November 2019 в 05:42
поделиться

Есть несколько способов избежать всего в HTML, и ни один из них не хорош.

Или вы можете вставить iframe , который загружает простой старый текстовый файл.

1
ответ дан 23 November 2019 в 05:42
поделиться

Проверенный и верный метод для HTML:

  1. Замените символ & на &
  2. Замените символ < на <
  3. Замените символ > на >
  4. По желанию окружите ваш образец HTML тегами
     и/или  . 
152
ответ дан 23 November 2019 в 05:42
поделиться

Устаревший тег

</code> по сути делает это, но больше не является частью спецификации XHTML. Однако он должен работать во всех текущих браузерах. </p> <p> Вот еще одна идея, хитрость / уловка, вы можете поместить код в текстовое поле следующим образом: </p> <pre><code>&lt;textarea disabled="true" style="border: none;background-color:white;"&gt; &lt;p&gt;test&lt;/p&gt; &lt;/textarea&gt; </code></pre> <p> Помещение угловых скобок и такого кода внутри текстовой области является недопустимым HTML и приведет к неопределенному поведению в разных браузерах. В Internet Explorer HTML интерпретируется, тогда как Mozilla, Chrome и Safari не интерпретируют его. </p> <p> Если вы хотите, чтобы он был недоступен для редактирования и выглядел по-другому, вы можете легко стилизовать его с помощью CSS. Единственная проблема заключается в том, что браузеры добавят этот маленький маркер перетаскивания в нижний правый угол, чтобы изменить размер поля. Или, в качестве альтернативы, попробуйте вместо этого использовать тег ввода. </p> <p> Правильный способ внедрения кода в текстовое поле - использовать язык на стороне сервера, например, этот PHP: </p> <pre><code>&lt;textarea disabled="true" style="border: none;background-color:white;"&gt; &lt;?php echo '&lt;p&gt;test&lt;/p&gt;'; ?&gt; &lt;/textarea&gt; </code></pre> <p> Затем он обходит интерпретатор html и помещает неинтерпретированный текст в текстовое поле последовательно во всех браузерах. </p> <p> Помимо этого, единственный способ - это действительно избежать кода самостоятельно, если используется статический HTML, или с помощью серверных методов, таких как .NET HtmlEncode (), если используется такая технология. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">5</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="23 November 2019 в 05:42 ">23 November 2019 в 05:42 </span> </div> <a class="s-link" href="/questions/162789/otobrazite-html-kod-v-html#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-852259"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="852260" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> В конечном итоге лучший (хотя и раздражающий) ответ - «избежать текста». </p> <p> Однако существует множество текстовых редакторов или даже автономных мини-утилит, которые могут делать это автоматически. Так что вам никогда не придется экранировать его вручную, если вы этого не хотите (если только это не смесь экранированного и неэкранированного кода ...) </p> <p> Быстрый поиск в Google показывает мне это, например: <a href="http://malektips.com/zzee-text-utility-html-escape-regular-expression.html" rel="nofollow noreferrer"> http : //malektips.com/zzee-text-utility-html-escape-regular-expression.html </a></p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">3</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="23 November 2019 в 05:42 ">23 November 2019 в 05:42 </span> </div> <a class="s-link" href="/questions/162789/otobrazite-html-kod-v-html#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-852260"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="852261" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>В HTML? Нет. </p> <p>В XML/XHTML? Можно использовать блок <code>CDATA</code>. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="23 November 2019 в 05:42 ">23 November 2019 в 05:42 </span> </div> <a class="s-link" href="/questions/162789/otobrazite-html-kod-v-html#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-852261"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="853300" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p><a href="http://www.htmlcodetutorial.com/_XMP.html" rel="noreferrer"> Не рекомендуется </a>, но работает в FF3 и IE8. </p> <pre><code>&lt;xmp&gt; &lt;b&gt;bold&lt;/b&gt;&lt;ul&gt;&lt;li&gt;list item&lt;/li&gt;&lt;/ul&gt; &lt;/xmp&gt; </code></pre> <p> Рекомендуется: </p> <pre><code>&lt;pre&gt;&lt;code&gt; code here, escape it yourself. &lt;/code&gt;&lt;/pre&gt; </code></pre> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">25</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="23 November 2019 в 05:42 ">23 November 2019 в 05:42 </span> </div> <a class="s-link" href="/questions/162789/otobrazite-html-kod-v-html#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-853300"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/html" class="tag" title="html" rel="tag">html</a> <a href="/questions/tagged/tags" class="tag" title="tags" rel="tag">tags</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/182086/skrytye-funkcii-html" title="Скрытые функции HTML">Скрытые функции HTML</a> - 23 May 2017 12:18 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11648/kak-fil-trovat-danny-e-massiva-v-javaz-cript-v-client-duplicate" title="Как фильтровать данные массива в Javascript в Client [duplicate] ">Как фильтровать данные массива в Javascript в Client [duplicate] </a> - 17 June 2015 03:09 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/24613/kak-zagruzit-pre-tegi-iz-php-html-v-vide-tekstovogo-fajla-dublikat" title="Как загрузить PRE-теги из PHP / HTML в виде текстового файла? [Дубликат] ">Как загрузить PRE-теги из PHP / HTML в виде текстового файла? [Дубликат] </a> - 25 May 2015 03:54 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/139260/instrumenty-dlja-bystree-luchshaja-zakrytaja-veb-razrabotka" title="Инструменты для быстрее, лучшая [закрытая] веб-разработка">Инструменты для быстрее, лучшая [закрытая] веб-разработка</a> - 9 December 2013 03:49 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/28171/chitat-i-otobrazhat-danny-e-iz-bazy-danny-x-v-fajl-excel-dublikat" title="читать и отображать данные из базы данных в файл excel [дубликат] ">читать и отображать данные из базы данных в файл excel [дубликат] </a> - 12 March 2018 02:52 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>