J'ai une petite page que je construis sur laquelle je veux pouvoir insérer des extraits de code que je pourrai plus tard copier à l'aide d'une fonction JavaScript. La fonction fonctionne très bien mais je rencontre des problèmes lorsque j'essaie d'utiliser XML, HTML ou d'autres langages similaires.

Quand j'essaye d'utiliser ces langages, mon premier instinct est de remplacer < et > par &lt; et &gt; respectivement. Le problème est que lorsque ma fonction JavaScript copie l'extrait de code dans le presse-papiers, elle copie également les &lt; et &gt; au lieu des < > qui sont affichés sur le page.

Existe-t-il un moyen de taper mon code tel quel et de l'afficher dans son intégralité dans le document afin que mon JavaScript puisse également le copier?

J'ai vu des gens utiliser <pre> et <code>, mais honnêtement, ils ne semblent pas faire de différence:

<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>
    </code>
</pre>

S'affiche toujours sur ma page comme:




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


Et aussi tout simplement casser ma fonction de copie JavaScript -

Exemple de travail:

<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);
};

(J'utilise 'groupNum' pour une animation plus loin dans le code)

Quelqu'un sait-il comment je pourrais faire fonctionner cela?

0
Calvin Bonner 28 avril 2020 à 06:50

2 réponses

Meilleure réponse

En effet, vous devez convertir les caractères spéciaux en entités HTML.
Pour le copier tel qu'il est rendu, copiez le textContent de votre élément au lieu de son 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);
};
<h2>.htaccess</h2>
<div class="group">
  <h3 class="head">Snippet Header</h3>
  <p>click following code to copy to clipboard</p>
  <div onclick="copyClipboard(1,1)">
    <pre>
&lt;urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"&gt; 
  &lt;url&gt;
    &lt;loc&gt;https://www.example.com/home.html/&lt;/loc&gt;
    &lt;lastmod&gt;2020-04-21&lt;/lastmod&gt;
    &lt;changefreq&gt;monthly&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;
&lt;/urlset&gt;
</pre>
  </div>
</div>
<textarea rows="10" cols="70" placeholder="paste here"></textarea>
1
Kaiido 28 avril 2020 à 04:33

Vous pouvez utiliser une zone de texte:

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

Pour obtenir sa valeur, utilisez document.querySelector('textarea').value.

Pour empêcher l'utilisateur de le modifier, ajoutez l'attribut disabled.

2
CertainPerformance 28 avril 2020 à 04:11