Как мне написать HTML в документе, чтобы он отображался в виде простого текста, но также можно было копировать через JavaScript?

Question

У меня есть небольшая страница, которую я создаю, и где я хочу добавить фрагменты кода, которые впоследствии можно будет скопировать с помощью функции JavaScript. Функция работает отлично, но у меня возникают проблемы, когда я пытаюсь использовать XML, HTML или другие подобные языки.

Когда я пытаюсь использовать эти языки, мой первый инстинкт - заменить < и > с < и > соответственно. Проблема в том, что когда моя функция JavaScript копирует фрагмент в буфер обмена, она также копирует < и > вместо < >, отображаемых на странице.

Можно ли как-то напечатать свой код и отобразить его полностью в документе, чтобы мой JavaScript также мог его скопировать?

Я видел, как люди используют <pre> и <code> но, честно говоря, они, похоже, не имеют значения:

<pre>
    <code>
        <?xml version="1.0" encoding="utf-8"?>
        <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"> 
            <url>
                <loc>https://www.example.com/home.html/</loc>
                <lastmod>2020-04-21</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
            </url>
        </urlset>
    

По-прежнему отображается на моей странице как:

        https://www.example.com/home.html/
        2020-04-21
        monthly
        1.0

А также просто сломал мою JavaScript функцию копирования -

Рабочий пример:

<h2>.htaccess</h2>
    <div class="group">
        <h3 class="head">Snippet Header</h3>
        <div onclick="copyClipboard(1,1)">
            <p>code</p>
        </div>
    </div>

function copyClipboard(oldNum,oldGroup) {
var codeNum = (oldNum - 1);
var groupNum = (oldGroup - 1);
var codeBox = document.getElementsByClassName("group")[groupNum].querySelectorAll("div");
var codeP = document.getElementsByClassName("group")[groupNum].querySelectorAll("p");
var temp_input = document.createElement("textarea");
document.body.appendChild(temp_input);
temp_input.value = codeP[codeNum].innerHTML;
temp_input.select();
document.execCommand("copy");
document.body.removeChild(temp_input);
};

(я использую 'groupNum' для анимации позже в коде)

Кто-нибудь знает, как я мог сделать эту работу?

Answer 1

Вы можете использовать текстовую область:

<textarea disabled rows=10 cols=70>
  <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"> 
      <url>
          <loc>https://www.example.com/home.html/</loc>
          <lastmod>2020-04-21</lastmod>
          <changefreq>monthly</changefreq>
          <priority>1.0</priority>
      </url>
  </urlset>
</textarea>

Чтобы получить его значение, используйте document.querySelector('textarea').value.

Чтобы запретить пользователю изменять его, добавьте атрибут disabled.

Answer 2

Действительно, вы должны преобразовать специальные символы в HTML -entities.
Чтобы скопировать его как обработанный, скопируйте textContent вашего элемента вместо innerHTML.

function copyClipboard(oldNum, oldGroup) {
  var codeNum = (oldNum - 1);
  var groupNum = (oldGroup - 1);
  var codeBox = document.getElementsByClassName("group")[groupNum].querySelectorAll("div");
  var codeP = document.getElementsByClassName("group")[groupNum].querySelectorAll("pre");
  var temp_input = document.createElement("textarea");
  document.body.appendChild(temp_input);
  // copy the textContent
  temp_input.value = codeP[codeNum].textContent;
  temp_input.select();
  document.execCommand("copy");
  document.body.removeChild(temp_input);
};

.htaccess

  Snippet Header
  click following code to copy to clipboard
  
    
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>https://www.example.com/home.html/</loc>
    <lastmod>2020-04-21</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>