it-swarm.com.de

In die Zwischenablage kopieren mit Trennlinie

Ich möchte einen Text in die Zwischenablage kopieren, jedoch in einer neuen Zeile.

Problem:

Wenn Sie auf die Schaltfläche im Snippet klicken und im Notizblock einfügen, erhalten Sie Folgendes:

Name: testSurname: testEmail: [email protected]: testCity: testCountry: nullAd Kategorie: testPlan: nullWebsite: Firmenname: testΜήνυμα: test

Was ich möchte:

Ich möchte, wenn möglich, Text in einem Zeilenumbruch kopieren. Das gleiche wie beim Kopieren:

Name: test
Nachname: test
E-Mail: [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>

Ich habe auch versucht, <br> durch \n und \r\n zu ersetzen, indem ich meinem div die folgende css-Regel hinzufügte: white-space:pre-wrap; ohne Anzeichen von Erfolg.

8
user7038047

Sie haben einige Probleme mit dem Code.

Das erste Problem in Ihrem Code ist, dass $(element).text()jquery text () Ihren Code einschließlich der <br>-Tags aus html entfernt. Es gibt also keine Zeilenumbrüche im Zwischenablage-Text, da alle HTML-Zeilenumbrüche entfernt werden. Also nichts zu ersetzen.

Wenn Sie <br> als Newlines beibehalten möchten, müssen Sie .html() verwenden und den Text manuell analysieren.

Das zweite Problem ist, dass Sie das <input>-Tag verwenden. <input>-Tag ist nur einzeilig, so dass Sie keine Zeilenumbrüche enthalten können. Sie müssen <textarea> für die Konvertierung verwenden.

Das letzte Problem ist wie oben, dass Sie auch \r\n für Windows-Benutzer verwenden sollten.

Ich habe Ihr Snippet mit einer funktionierenden Version aktualisiert.

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

Non-jQuery Lösung zum Kopieren einer Zeichenfolge mit Zeilenumbrüchen in die Zwischenablage

Bitte beachten Sie die Codekommentare zur Verdeutlichung.

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

Zwei Dinge sind falsch:

(1) Gemäß der Jquery-Dokumentation für text :

Das Ergebnis der .text () -Methode ist eine Zeichenfolge, die den kombinierten Text aller übereinstimmenden Elemente enthält. (Aufgrund unterschiedlicher HTML-Parser in verschiedenen Browsern kann der zurückgegebene Text in Zeilenumbrüchen und anderen Leerzeichen variieren.)

Und ihr Beispiel 

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

Der Code $( "div.demo-container" ).text() wird Folgendes erzeugen:

Demonstration Box list item 1 list item 2

Verwenden Sie also stattdessen die html()-Methode, um die innerHTML abzurufen.


(2) Der Tag <input> entfernt Zeilenumbrüche. Verwenden Sie stattdessen textarea. Siehe: diese Antwort für weitere Informationen.


Hoffentlich funktioniert dieses Spinett.

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

Ihr Code funktioniert wahrscheinlich gut, aber Notepad kann keine\n\-Zeichen von Unix verarbeiten, es kann nur\r\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n. Deshalb werden sie nicht angezeigt.

Laden Sie einen fortgeschritteneren Editor (wie Notepad ++, https://notepad-plus-plus.org ) herunter und versuchen Sie, ihn dort einzufügen. Und nicht nur das, es hat auch eine Menge anderer sehr cooler Features wie Syntax-Highlighting, Makros und Plugins, also lohnt es sich, es für noch mehr Zwecke einzusetzen. 

Wenn Sie möchten, dass die Zeilenumbrüche in MS-Apps funktionieren, müssen Sie die Zeilenumbrüche unmittelbar vor dem Kopieren mit der folgenden Zeile ersetzen:

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

Zum Drucken in HTML müssen Sie\n durch\ersetzen 
, so was:

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