使用折线复制到剪贴板

本文介绍了使用折线复制到剪贴板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想将文字复制到剪贴板但是换行。

I want to copy a text to clipboard but in a new line.

问题：

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

If you click the button in the snippet and paste in the notepad this is what you gonna get:

名称： testSurname：testEmail：test@gmailAddress：testCity：testCountry：nullAd类别：testPlan：null网站：公司名称：testΜήνυμα：test

Name: testSurname: testEmail: test@gmailAddress: testCity: testCountry: nullAd Category: testPlan: nullWebsite: Company name: testΜήνυμα: test

我想要的是什么：

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

I want, if possible, to copy text in a newline. The same as it is when you copy it:

姓名：test 姓：test 电子邮件：test@gmail ...

Name: test Surname: test Email: test@gmail ...

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="ajax.googleapis/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: test@gmail<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>

我还尝试用<$替换< br> c $ c> \ n 和 \\\\ n 将以下css规则添加到我的div： white-space：pre-wrap; 没有任何成功的迹象。

I have also tried to replace <br> with \n and \r\n by adding the following css rule to my div: white-space:pre-wrap; without any signs of success.

推荐答案

你有几个代码问题。

代码中的第一个问题是 $（元素）.text（） jquery文本（）从html中删除代码，包括< br> 标记。因此，剪贴板文本中没有换行符，因为所有html换行符都被删除了......所以无需替换。

First problem in your code is the $(element).text()jquery text() strips your code from html including the <br> tags. So there is no newlines in the clipboard text since all html newlines are stripped away.. so nothing to replace.

如果你想保留< ; br> 作为换行符，您需要使用 .html（）并更加手动地解析文本。

If you want to keep <br> as newlines you need to use .html() and parse your text more manually.

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

Second problem is that you use <input> tag. <input> tag is only single lines so u cant have any newline in there. you need to use <textarea> for the conversion.

最后一个问题如上所述，您也应该对Windows用户使用 \\\\ n 。

The last problem is as above that you also should use \r\n for windows users.

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

I updated your snippet with a working version.

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="ajax.googleapis/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: test@gmail<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>