使用折线复制到剪贴板

我想将文本复制到剪贴板，但是要换行。

问题：

如果您点击代码段中的按钮并粘贴到记事本中，这就是您要获得的内容：

名称：testSurname：testEmail：[e-mail]：testCity：testCountry：nullAd类别：testPlan：null网站：公司名称：testΜήνυμα：test

我想要的是：

如果可能，我希望在换行符中复制文本。 与复制时相同：

名称：测试
姓：测试
电子邮件：[e-mail]
…

function copyToClipboard(element) { var $temp = $(""); $("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!"); }); 

   
Div #error-details: the text I want to copy to clipboard:
 Name: test
Surname: test
Email: [e-mail]
Address: test
City: test
Country: null
Ad Category: test
Plan: null
Website: 
Company name: test
Μήνυμα: test 

 Copy div to clipboard 

我还试图通过在我的div中添加以下css规则来将\n替换为\n和\r\n ： white-space:pre-wrap; 没有任何成功的迹象。

Answer 1

您的代码有一些问题。

代码中的第一个问题是$(element).text() jquery text（）从包含
标签的html中删除你的代码。 因此，剪贴板文本中没有换行符，因为所有html换行都被删除了..所以没有什么可以替换的。

如果您想将
保留为换行符，则需要使用.html()并手动解析文本。

第二个问题是你使用标签。 标签只有单行，所以你不能有任何新行。 你需要使用进行转换。

最后一个问题是，你也应该使用\r\n用于Windows用户。

我使用工作版更新了您的代码段。

 function copyToClipboard(element) { var $temp = $(""); 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!"); }); 

   
Div #error-details: the text I want to copy to clipboard:
 Name: test
Surname: test
Email: [e-mail]
Address: test
City: test
Country: null
Ad Category: test
Plan: null
Website: 
Company name: test
Μήνυμα: test 

 Copy div to clipboard 

Answer 2

非jQuery解决方案，只需将带换行符的字符串复制到剪贴板

为清晰起见，请参阅代码注释。

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

Answer 3

有两件事是错的：

（1）根据文本的jquery文档：

.text（）方法的结果是一个包含所有匹配元素的组合文本的字符串。 （由于不同浏览器中HTML解析器的变化，返回的文本可能会在换行符和其他空格中有所不同。）

他们的榜样，

 
 
Demonstration Box
 
 
list item 1
 
list item 2
 
  

代码$( "div.demo-container" ).text()将产生：

Demonstration Box list item 1 list item 2

所以只需使用html()方法来获取innerHTML 。

---

（2） 标签删除换行符。 请改用textarea 。 请参阅： 此答案了解更多信息。

---

希望这个spinet会起作用。

 function copyToClipboard(element) { var $temp = $(""); $("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!"); }); 

   
Div #error-details: the text I want to copy to clipboard:
 Name: test
Surname: test
Email: [e-mail]
Address: test
City: test
Country: null
Ad Category: test
Plan: null
Website: 
Company name: test
Μήνυμα: test 

 Copy div to clipboard 

Answer 4

您的代码可能运行良好，但是记事本无法处理Unix’\ n \ n换行符，它只能处理\ r \ n，这就是您没有看到它们的原因。

请下载更高级的编辑器（如Notepad ++， https：//notepad-plus-plus.org ）并尝试粘贴它。 不仅如此，它还有许多其他非常酷的function，如语法高亮，宏和插件，所以值得将它用于更多目的。

如果要使换行符在MS应用程序中有效，则需要在使用此行复制之前替换换行符：

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

要在HTML中打印，您需要替换\ n
， 像这样：

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