web-dev-qa-db-fra.com

Copier dans le presse-papiers avec ligne de rupture

Je veux copier un texte dans le presse-papier mais dans une nouvelle ligne.

Problème:

Si vous cliquez sur le bouton dans l'extrait de code et collez-le dans le bloc-notes, voici ce que vous obtiendrez:

Nom: testSurname: testEmail: [email protected]: testCity: testCountry: nullAd Catégorie: testPlan: nullWebsite: Nom de l'entreprise: test

Ce que je veux:

Je veux, si possible, copier du texte dans une nouvelle ligne. Le même que quand vous le copiez:

Nom: test
Nom de famille: test
Email: [email protected]
...

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

J'ai également essayé de remplacer <br> par \n et \r\n en ajoutant la règle css suivante à mon div: white-space:pre-wrap; sans aucun signe de réussite.

javascriptjquerycopyclipboard
8
user7038047

Vous avez quelques problèmes avec le code.

Le premier problème de votre code est la $(element).text()jquery text () supprime votre code du code HTML, y compris les balises <br>. Il n'y a donc pas de nouvelles lignes dans le texte du presse-papiers, car toutes les nouvelles lignes html ont été supprimées. Donc, rien à remplacer.

Si vous souhaitez conserver <br> en tant que nouvelles lignes, vous devez utiliser .html() et analyser votre texte plus manuellement.

Le deuxième problème est que vous utilisez la balise <input>. La balise <input> ne contient qu'une seule ligne, vous ne pouvez donc pas insérer de nouvelle ligne. vous devez utiliser <textarea> pour la conversion.

Le dernier problème est comme ci-dessus que vous devriez également utiliser \r\n pour les utilisateurs de Windows.

J'ai mis à jour votre extrait avec une version de travail.

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(brRegex, "\r\n")).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

18
JohanSellberg

Solution non jQuery permettant de copier simplement une chaîne avec des sauts de ligne dans le presse-papier

Veuillez vous référer aux commentaires du code pour plus de clarté.

function copyStringWithNewLineToClipBoard(stringWithNewLines){

    // Step 1: create a textarea element.
    // It is capable of holding linebreaks (newlines) unlike "input" element
    const myFluffyTextarea = document.createElement('textarea');

    // Step 2: Store your string in innerHTML of myFluffyTextarea element        
    myFluffyTextarea.innerHTML = stringWithNewLines;

    // Step3: find an id element within the body to append your myFluffyTextarea there temporarily
    const parentElement = document.getElementById('any-id-within-any-body-element');
    parentElement.appendChild(textarea);

    // Step 4: Simulate selection of your text from myFluffyTextarea programmatically 
    myFluffyTextarea.select();

    // Step 5: simulate copy command (ctrl+c)
    // now your string with newlines should be copied to your clipboard 
    document.execCommand('copy');

    // Step 6: Now you can get rid of your fluffy textarea element
    parentElement.removeChild(myFluffyTextarea);
    }
5
keshavDulal

Deux choses ne vont pas:

(1) Selon la documentation de jquery pour text :

Le résultat de la méthode .text () est une chaîne contenant le texte combiné de tous les éléments correspondants. (En raison des variations des analyseurs HTML dans les différents navigateurs, le texte renvoyé peut varier en nouvelles lignes et en d'autres espaces.)

Et leur exemple 

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>

Le code $( "div.demo-container" ).text() produira:

Demonstration Box list item 1 list item 2

Il suffit donc d’utiliser la méthode html() à la place pour extraire la innerHTML.

(2) La balise <input> supprime les nouvelles lignes. Utilisez textarea à la place. Voir: cette réponse pour plus d'informations.

Espérons que cette épinette fonctionnera.

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  var html = $(element).html();
  html = html.replace(/<br>/g, "\n"); // or \r\n
  console.log(html);
  $temp.val(html).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
<h2>Div #error-details: the text I want to copy to clipboard:</h2>
<er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

<br><br>
    
<button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

1
TheChetan

Votre code fonctionne probablement bien, mais Notepad ne peut pas gérer les nouvelles lignes\n d'Unix, il ne peut que gérer\r\n et c'est pourquoi vous ne les voyez pas.

Téléchargez un éditeur plus avancé (tel que Notepad ++, https://notepad-plus-plus.org ) et essayez de le coller à cet endroit. Et pas seulement cela, mais il a beaucoup d'autres fonctionnalités très intéressantes comme la coloration syntaxique, les macros et les plugins, il est donc utile de les utiliser à d'autres fins. 

Si vous voulez que les nouvelles lignes fonctionnent dans les applications MS, vous devez remplacer les nouvelles lignes juste avant de les copier en utilisant cette ligne:

$temp = $temp.replace(/\n/g, "\r\n");

Pour imprimer en HTML, vous devez remplacer\n par 
, comme ça:

$temp = $temp.replace(/\n/g, "<br>");
0
Aenadon